CSS3 background 分别设置多个背景图片[精].docx

CSS3允许给box/div元素设置多个背景图片，只需要在原来的基础上加逗号分隔即可分别设置。支持 Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) ，Internet Explorer (9.0+) 等。先上一个小例子，一只羊的png图片背景和草原的大背景可以分别设置。效果如下：代码如下：XHTML1234567#example1{width:500px;height:250px;background-image:url(sheep.png),url(betweengrassandsky.png);background-position:center?bottom,left?top;background-repeat:no-repeat;}它是如何工作的呢？多个背景图片可以通过单个的设置，以逗号分隔后，会分别识别单个的背景图片属性来加以设置，逗号在此起的作用相当于制造一个并集而非简单的覆盖。相当于Photoshop中图层的概念，优先级取决于你添加背景图片的顺序。语法：XHTML1234background-image:?bg-image?[ ,?bg-image?]*?bg-image?=?image?| nonestrongNote: a value of ‘none’ still generates a layer./strong实例介绍：XHTML1background-image:url(sheep.png),url(betweengrassandsky.png);CSS3 中加以此逗号同样支持以下属性：background-repeatbackground-attachmentbackground-position,?background-clip,background-origin?background-size.源码例子：XHTML1background-position:center?bottom,left?top;逗号分隔的属性，会从头到脚一一地匹配，假设参数过少，则会使用最后末尾的属性来填充。假设参数过多，则会自动舍弃，不予理会。background的速记短语法同样支持！XHTML1234567background:?[?bg-layer?, ]*?final-bg-layer??bg-layer?=?bg-image?||?bg-position?[ /?bg-size?]? ||?repeat-style?||attachment?||?box{1,2}??final-bg-layer?=?bg-image?||?bg-position?[ /?bg-size?]? ||?repeat-style?||attachment?||?box{1,2} ||?background-color?spanstyle=color: #993300;strongNote: background-color is only permitted in the final background layer./strong/span实例介绍：XHTML1background:url(sheep.png)center?bottom?no-repeat,url(betweengrassandsky.png)left?top?no-repeat;浏览器兼容性：支持目前主流浏览器及支持css3标准的所有浏览器。例如： Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) ，Internet Explorer (9.0+) 等。更多实例介绍：Example AXHTML1234567891011121314#exampleA{width:500px;height:250px;background-image:url(decoration.png),url(ribbon.png),url(old_paper.jpg);background-repeat:no-repeat;background-position:left?top,right?bottom,left?top;}strongor:/strong?#exampleA{width:500px;height:250px;background:url(decoration.png)left?top?no-repeat,url(ribbon.png)right?bottomno-repeat,url(old_paper.jpg)left?top?no-repeat;}Example BXHTML1234567891011121314