background-image

版本：CSS1/3
2018.3.14

语法：

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	8.0+	40.0+	40.0+	8.0+	40.0+	8.0+	4.4+	28.0+
Multiple background images	8.0
Multiple background images	9.0+

示例：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>CSS background-image_CSS参考手册_web前端开发参考手册系列_编程学问网</title>

<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),
					  linear-gradient(to top, #45B5DA, #0382AD);
	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>

关注编程学问公众号