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

CSS3允许给box/div元素设置多个背景图片，只需要在原来的基础上加逗号分隔即可分别设置。 支持 Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) ，Internet Explorer (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:center?bottom,left?top; background-repeat:no-repeat; }它是如何工作的呢？ 多个背景图片可以通过单个的设置，以逗号分隔后，会分别识别单个的背景图片属性来加以设置，逗号在此起的作用相当于制造一个并集而非简单的覆盖。相当于Photoshop中图层的概念，优先级取决于你添加背景图片的顺序。 语法： XHTML 1 2 3 4background-image:?bg-image?[ ,?bg-image?]* ? bg-image?=?image?| none strongNote: a