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

CSS3允许给box/div元素设置多个背景图片，只需要在原来的基础上加逗号分隔即可分别设置。

支持 Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) ，Internet Explorer (9.0+) 等。

先上一个小例子，一只羊的png图片背景和草原的大背景 可以分别设置。效果如下：

代码如下：

XHTML

#example1 { width: 500px; height: 250px; background-image: url(sheep.png), url(betweengrassandsky.png); background-position: center bottom, left top; background-repeat: no-repeat; }

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

background-image:  [ ,  ]*  =  | none Note: a value of ‘none’ still generates a layer.

1 2 3 4

background -image :   [ ,   ]*    =   | none Note: a value of ‘none’ still generates a layer.

实例介绍：

XHTML

background-image: url(sheep.png), url(betweengrassandsky.png);

1	background -image : url (sheep .png ) , url (betweengrassandsky .png ) ;

CSS3 中加以此逗号同样支持以下属性：

1. background-repeat
2. background-attachment
3. background-position, 
4. background-clip,
5. background-origin 
6. background-size.

源码例子：

XHTML

background-position: center bottom, left top;

1	background -position : center bottom , left top ;

逗号分隔的属性，会从头到脚 一 一地 匹配，假设参数过少，则会使用最后末尾的属性来填充。

假设参数过多，则会自动舍弃，不予理会。

background的速记短语法 同样支持！

XHTML

background: [  , ]*    =  ||  [ /  ]? ||  || || {1,2}   =  ||  [ /  ]? ||  || || {1,2} ||  Note: background-color is only permitted in the final background layer.

1 2 3 4 5 6 7

background :  [   , ]*       =   ||   [ /   ]? ||   ||  ||  {1,2}     =   ||   [ /   ]? ||   ||  ||  {1,2} ||    style = "color: #993300;" > Note: background-color is only permitted in the final background layer.

实例介绍：

XHTML

background: url(sheep.png) center bottom no-repeat, url(betweengrassandsky.png) left top no-repeat;

1	background : 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 A

XHTML

#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; } or: #exampleA { width: 500px; height: 250px; background: url(decoration.png) left top no-repeat, url(ribbon.png) right bottom no-repeat, url(old_paper.jpg) left top no-repeat; }

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 : left top , right bottom , left top ; } or:   #exampleA { width : 500px ; height : 250px ; background : url (decoration .png ) left top no -repeat , url (ribbon .png ) right bottom no -repeat , url (old _paper .jpg ) left top no -repeat ; }

Example B

XHTML

#exampleB { display: 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: left top, right top, left top ; } or: #exampleB { width: 500px; height: 250px; background: url(left.png) left top no-repeat, url(right.png) right top no-repeat, url(main.png) left top repeat-x; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14

#exampleB { display : 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 : left top , right top , left top ; } or :   #exampleB { width : 500px ; height : 250px ; background : url (left .png ) left top no -repeat , url (right .png ) right top no -repeat , url (main .png ) left top repeat -x ; }