background-image

语法：

background-image：<bg-image> [ , <bg-image> ]*

默认值：none

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

取值：

none：: 无背景图。
<url>：: 使用绝对或相对地址指定背景图像。
<linear-gradient>：: 使用线性渐变创建背景图像。（CSS3）
<radial-gradient>：: 使用径向(放射性)渐变创建背景图像。（CSS3）
<repeating-linear-gradient>：: 使用重复的线性渐变创建背景图像。（CSS3）
<repeating-radial-gradient>：: 使用重复的径向(放射性)渐变创建背景图像。（CSS3）

说明：

设置或检索对象的背景图像。

如果设置了background-image，同时也建议设置background-color用于当背景图像不可见时保持与文本颜色有一定的对比度。
对应的脚本特性为backgroundImage。

兼容性：

浅绿 = 支持
红色 = 不支持
墨绿 = 部分支持

支持版本\类型	IE	Firefox	Safari	Chrome	Opera
版本	6.0-8.0 ^{#1 #2 #3}	4.0	5.1.7	4.0	11.5-11.51 ^#3
版本	9.0 ^{#2 #3}				11.5-11.51 ^#3
版本	10.0				11.6

不支持：CSS3 background-image多组背景图。
不支持：CSS3新增参数值：<linear-gradient> | <repeating-linear-gradient>作为背景图像。
不支持：CSS3新增参数值：<radial-gradient> | <repeating-radial-gradient>作为背景图像。

示例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>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:-moz-linear-gradient(top , #45B5DA, #0382AD);background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, from(#45B5DA), to(#0382AD));background-image:-o-linear-gradient(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">
		使用url()引入背景图像
		使用url()可以是绝对或相对路径
	</li>
	<li class="gradient">
		使用渐变绘制背景图像
		渐变种类有: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient
	</li>
	<li class="multiple">
		多重背景图
		多重背景图可以是url()或gradient的混合方式
	</li>
</ul>
</body>
</html>