Multiple background - CSS3 Documentation

语法：

background：[ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]

相关属性：[ background-origin ] || [ background-clip ] || [ background-size ]

取值：

[ background-image ]：: 指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
[ background-repeat ]：: 指定对象的背景图像如何铺排填充。
[ background-attachment ]：: 指定对象的背景图像是随对象内容滚动还是固定的。
[ background-position ]：: 指定对象的背景图像位置。
[ background-origin ]：: 指定对象的背景图像显示的原点。
[ background-clip ]：: 指定对象的背景图像向外裁剪的区域。
[ background-size ]：: 指定对象的背景图像的尺寸大小。

说明：

复合属性。检索或设置对象的多重背景图像（背景色background-color不能设置多重）。

一个元素可以设置多重背景图像。
每组属性间使用逗号分隔。
如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。

示例：假设要在同一个元素上定义3个背景图像

缩写方式：

background:url(test1.jpg) no-repeat scroll 10px 20px,url(test2.jpg) no-repeat scroll 50px 60px,url(test3.jpg) no-repeat scroll 90px 100px;
background-origin:content-box,content-box,content-box;
background-clip:padding-box,padding-box,padding-box;
background-size:50px 60px,50px 60px,50px 60px;

拆分方式：

background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
background-repeat:no-repeat,no-repeat,no-repeat;
background-attachment:scroll,scroll,scroll;
background-repeat:10px 20px,50px 60px,90px 100px;
background-origin:content-box,content-box,content-box;
background-clip:padding-box,padding-box,padding-box;
background-size:50px 60px,50px 60px,50px 60px;

如果定义了多个背景图片，而其他属性只有一个参数值，则表明所有背景图片的该属性都应用同一个参数值。据此可以对上面的例子进行缩写：

缩写方式：

background:url(test1.jpg) no-repeat scroll 10px 20px,url(test2.jpg) no-repeat scroll 50px 60px,url(test3.jpg) no-repeat scroll 90px 100px;
background-origin:content-box;
background-clip:padding-box;
background-size:50px 60px;

拆分方式：

background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-repeat:10px 20px,50px 60px,90px 100px;
background-origin:content-box;
background-clip:padding-box;
background-size:50px 60px;

兼容性：

= 支持
= 不支持
= 部分支持
= 实验性质

支持版本\类型
版本	6.0-8.0	4.0	5.1	13.0	11.50
版本	9.0	4.0	5.1	13.0	11.50