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#example1width:500px;height:250px;background-image:url(sheep.png),url(betweengrassandsky.png);background-position:centerbottom,lefttop;background-repeat:no-repeat;它是如何工作的呢？多个背景图片可以通过单个的设置，以逗号分隔后，会分别识别单个的背景图片属性来加以设置，逗号在此起的作用相当于制造一个并集而非简单的覆盖。相当于Photoshop中图层的概念，优先级取决于你添加背景图片的顺序。语法：XHTML1234background-image: ,*=| noneNote: a value of none still generates a layer.实例介绍：XHTML1background-image:url(sheep.png),url(betweengrassandsky.png);CSS3 中加以此逗号同样支持以下属性：1. background-repeat2. background-attachment3. background-position,4. background-clip,5. background-origin6. background-size.源码例子：XHTML1background-position:centerbottom,lefttop;逗号分隔的属性，会从头到脚 一 一地 匹配，假设参数过少，则会使用最后末尾的属性来填充。假设参数过多，则会自动舍弃，不予理会。background的速记短语法 同样支持！XHTML1234567background:, *=| /? |1,2=| /? |1,2 |Note: background-color is only permitted in the final background layer.实例介绍：XHTML1background:url(sheep.png)centerbottomno-repeat,url(betweengrassandsky.png)lefttopno-repeat;浏览器兼容性：支持 目前主流浏览器 及支持css3标准的所有浏览器。例如： Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) ，Internet Explorer (9.0+) 等。更多实例介绍：Example AXHTML1234567891011121314#exampleAwidth:500px;height:250px;background-image:url(decoration.png),url(ribbon.png),url(old_paper.jpg);background-repeat:no-repeat;background-position:lefttop,rightbottom,lefttop;or:#exampleAwidth:500px;height:250px;background:url(decoration.png)lefttopno-repeat,url(ribbon.png)rightbottomno-repeat,url(old_paper.jpg)lefttopno-repeat;Example BXHTML1234567891011121314#exampleBdisplay:inline-block;margin:1em;padding:1em;background-image:url(left.png),url(right.png),url(main.png);background-repeat:no-repeat,no-repeat,repeat-x;background-position:lefttop,righttop,lefttop;or:#exampleBwidth:500px;height:250px;ba