[CSS参考手册](http://css.doyoe.com/)»[属性列表](#)»[背景属性](#)» 相关内容： [**其它背景属性参考**选择其它项](#) - [background](#) - [background-color](#) - [background-image](#) - [background-repeat](#) - [background-attachment](#) - [background-position](#) - [background-origin](#) - [background-clip](#) - [background-size](#) - [Multiple background](#) # Multiple background - **版本：CSS3** - 继承性：无 ### 语法： **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; ~~~ ### 兼容性： - 浅绿 = 支持 - 红色 = 不支持 - 墨绿 = 部分支持 - 橙色 = 实验性质 <table class="gdataform"><thead><tr><th><a href="#browser" title="查看本文档测试时所用浏览器版本">支持版本</a>\类型</th> <th><span class="browser-ie">IE</span></th> <th><span class="browser-firefox">Firefox</span></th> <th><span class="browser-safari">Safari</span></th> <th><span class="browser-chrome">Chrome</span></th> <th><span class="browser-opera">Opera</span></th> </tr></thead><tbody><tr><th>版本</th> <td class="unsupport">6.0-8.0</td> <td rowspan="2" class="support">4.0</td> <td rowspan="2" class="support">5.1</td> <td rowspan="2" class="support">13.0</td> <td rowspan="2" class="support">11.50</td> </tr><tr><th>版本</th> <td class="support">9.0</td> </tr></tbody></table> ### 示例： 定义多重背景图像 Copyright © 2006-2012 [Doyoe](http://www.doyoe.com/). All Rights Reserved