CSS3 Multiple background 属性
说明:本文档兼容性测试基础环境为:windows系统;IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
语法:
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;
兼容性:
- 浅绿 = 支持
- 红色 = 不支持
- 墨绿 = 部分支持
- 橙色 = 实验性质
支持版本\类型 | IE | Firefox | Safari | Chrome | Opera |
---|---|---|---|---|---|
版本 | 6.0-8.0 | 4.0 | 5.1 | 13.0 | 11.50 |
版本 | 9.0 |