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: <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 中加以此逗号同样支持以下属性：

background-repeat

background-attachment

background-position

, 

background-clip

,

background-origin

 

background-size

.

源码例子：

XHTML

background-position: center bottom, left top;

1	background-position:center bottom,left top;

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

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

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)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;
}
<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: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; }

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; }