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

CSS3允许给box/div元素设置多个背景图片，只需要在原来的基础上加逗号分隔即可分别设置。
支持MozillaFirefox(3.6+),Safari/Chrome(1.0/1.3+),Opera(10.5+)，InternetExplorer(9.0+)等。
先上一个小例子，一只羊的png图片背景和草原的大背景可以分别设置。效果如下：

代码如下：
XHTML

1
2
3
4
5
6
7#example1{
width:500px;
height:250px;
background-image:url(sheep.png),url(betweengrassandsky.png);
background-position:centerbottom,lefttop;
background-repeat:no-repeat;
}它是如何工作的呢？
多个背景图片可以通过单个的设置，以逗号分隔后，会分别识别单个的背景图片属性来加以设置，逗号在此起的作用相当于制造一个并集而非简单的覆盖。相当于Photoshop中图层的概念，优先级取决于你添加背景图片的顺序。
语法：
XHTML

1
2
3
4background-image:<bg-image>[,<bg-image>]*

<bg-image>=<image>|none
<strong>Note:avalueof‘none’stillgeneratesalayer.</strong>实例介绍：
XHTML

1background-image:url(sheep.png),url(betweengrassandsky.png);CSS3中加以此逗号同样支持以下属性：
background-repeat
background-attachment
background-position,
background-clip,
background-origin
background-size.
源码例子：
XHTML

1background-position:centerbottom,lefttop;逗号分隔的属性，会从头到脚一一地匹配，假设参数过少，则会使用最后末尾的属性来填充。
假设参数过多，则会自动舍弃，不予理会。
background的速记短语法同样支持！
XHTML

1
2
3
4
5
6
7background:[<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;"><strong>Note:background-colorisonlypermittedinthefinalbackgroundlayer.</strong></span>实例介绍：
XHTML

1background:url(sheep.png)centerbottomno-repeat,url(betweengrassandsky.png)lefttopno-repeat;浏览器兼容性：
支持目前主流浏览器及支持css3标准的所有浏览器。
例如：MozillaFirefox(3.6+),Safari/Chrome(1.0/1.3+),Opera(10.5+)，InternetExplorer(9.0+)等。
更多实例介绍：
ExampleA

XHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14#exampleA{
width:500px;
height:250px;
background-image:url(decoration.png),url(ribbon.png),url(old_paper.jpg);
background-repeat:no-repeat;
background-position:lefttop,rightbottom,lefttop;
}
<strong>or:</strong>

#exampleA{
width:500px;
height:250px;
background:url(decoration.png)lefttopno-repeat,url(ribbon.png)rightbottomno-repeat,url(old_paper.jpg)left