background-image
语法
- background-image:<bg-image> [ , <bg-image> ]*
- <bg-image> = <image> | none
- 默认值:none
- 适用于:所有元素
- 继承性:无
- 动画性:否
- 计算值:指定值
取值
- none:无背景图。
- <image>:使用绝对或相对地址指或者创建渐变色来确定图像。
说明
设置或检索对象的背景图像。
- 如果设置了 <' background-image '>,同时也建议设置 <' background-color '> 用于当背景图像不可见时保持与文本颜色有一定的对比度。
- 如果定义了多组背景图,且背景图之间有重叠,写在前面的将会盖在写在后面的图像之上。
- 对应的脚本特性为backgroundImage。
兼容性
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+ |
Multiple image 多组图像 |
6.0-8.0 | |||||||
9.0+ |
示例
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<style>
.test strong {
font-size: 16px;
}
.test .url p {
padding-top: 200px;
background-image: url(skin/p_103x196_1.jpg);
background-repeat: no-repeat;
}
.test .gradient p {
height: 100px;
background-image: linear-gradient(to top, #45B5DA, #0382AD);
}
.test .multiple p {
padding-top: 200px;
background-image: url(skin/p_103x196_1.jpg),
url(skin/p_103x196_2.jpg),
url(skin/p_103x196_3.jpg);
background-repeat: no-repeat;
background-position: 0 0,
100px 0,
200px 0;
}
</style>
</head>
<body>
<ul class="test">
<li class="url">
<strong>使用url()引入背景图像</strong>
<p>使用url()可以是绝对或相对路径</p>
</li>
<li class="gradient">
<strong>使用渐变绘制背景图像</strong>
<p>渐变种类有: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient</p>
</li>
<li class="multiple">
<strong>多重背景图</strong>
<p>多重背景图可以是url()或gradient的混合方式</p>
</li>
</ul>
</body>
</html>