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:centerbottom,lefttop;

background-repeat:no-repeat;

}

它是如何工作的呢？

多个背景图片可以通过单个的设置，以逗号分隔后，会分别识别单个的背景图片属性来加以设置，逗号在此起的作用相当于制造一个并集而非简单的覆盖。相当于Photoshop中图层的概念，优先级取决于你添加背景图片的顺序。

语法：

XHTML

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

1

2

3

4

background-image: <bg-image> [ , <bg-image> ]*

 

<bg-image> = <image> | none

<strong>Note: a value of ‘none’ still generates a layer.</strong>

实例介绍：

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:centerbottom,lefttop;

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

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

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

XHTML

background: [ <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><span style="color: #993300;"><strong>Note: background-color is only permitted in the final background layer.</strong></span>

1

2

3

4

5

6

7

background: [ <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-color is only permitted in the final background layer.</strong></span>

实例介绍：

XHTML

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

1

background:url(sheep.png)centerbottom no-repeat,url(betweengrassandsky.png)lefttop 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;}<strong>or:</strong>#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:lefttop,rightbottom,lefttop;

}

<strong>or:</strong>

 

#exampleA{

width:500px;

height:250px;

background:url(decoration.png)lefttop no-repeat,url(ribbon.png)rightbottom no-repeat,url(old_paper.jpg)lefttop 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:lefttop,righttop,lefttop ;

}

or:

 

#exampleB{

width:500px;

height:250px;

background:url(left.png)lefttop no-repeat,url(right.png)righttop no-repeat,url(main.png)lefttop repeat-x;

}