css3 background 分别设置多个背景图片

《css3 background 分别设置多个背景图片》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、CSS3允许给box/div元素设置多个背景图片，只需要在原来的基础上加逗号分隔即可分别设置。支持MozillaFirefox(3.6+),Safari/Chrome(1.0/1.3+),Opera(10.5+)，InternetExplorer(9.0+)等。先上一个小例子，一只羊的png图片背景和草原的大背景可以分别设置。效果如下：代码如下：XHTML1234567#example1{width:500px;height:250px;background-image:url(sheep.png),url(betweengrassandsk

2、y.png);background-position:center bottom,left top;background-repeat:no-repeat;}它是如何工作的呢？多个背景图片可以通过单个的设置，以逗号分隔后，会分别识别单个的背景图片属性来加以设置，逗号在此起的作用相当于制造一个并集而非简单的覆盖。相当于Photoshop中图层的概念，优先级取决于你添加背景图片的顺序。语法：XHTML1234background-image:  [,  ]*  =  

3、no

4、neNote:avalueof‘none’stillgeneratesalayer.实例介绍：XHTML1background-image:url(sheep.png),url(betweengrassandsky.png);CSS3中加以此逗号同样支持以下属性：1.background-repeat2.background-attachment3.background-position, 4.background-clip,5.background-origin 6.background-size.源码例子

5、：XHTML1background-position:center bottom,left top;逗号分隔的属性，会从头到脚一一地匹配，假设参数过少，则会使用最后末尾的属性来填充。假设参数过多，则会自动舍弃，不予理会。background的速记短语法同样支持！XHTML1234567background: [  ,]*    =  

6、

7、  [/  ]?

8、

9、  

10、

11、

12、ent> 

13、

14、 {1,2}   =  

15、

16、  [/  ]?

17、

18、  

19、

20、 

21、

22、 {1,2}

23、

24、  Note:background-colorisonlypermittedinthefinalbackgroundlayer.实例介绍：XHTML

25、1background:url(sheep.png)center bottom no-repeat,url(betweengrassandsky.png)left top no-repeat;浏览器兼容性：支持目前主流浏览器及支持css3标准的所有浏览器。例如：MozillaFirefox(3.6+),Safari/Chrome(1.0/1.3+),Opera(10.5+)，InternetExplorer(9.0+)等。更多实例介绍：ExampleAXHTML12345678910111213#exampleA{width:500px;he

26、ight: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;}or: #exampleA{width:500px;height:250px;background:url(decoration.png)left top no-repeat,url(ri

27、bbon.png)right bottomno-repeat,url(old_paper.jpg)left top no-repeat;}14ExampleBXHT