CSS3允许给box/div元素设置多个背景图片,只需要在原来的基础上加逗号分隔即可分别设置。
支持 Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) ,Internet Explorer (9.0+) 等。
先上一个小例子,一只羊的png图片背景和草原的大背景 可以分别设置。效果如下:
|
#example1{
width:500px;
height:250px;
background-image:url(sheep.png),url(betweengrassandsky.png);
background-position:centerbottom,lefttop;
background-repeat:no-repeat;
}
|
它是如何工作的呢?
多个背景图片可以通过单个的设置,以逗号分隔后,会分别识别单个的背景图片属性来加以设置,逗号在此起的作用相当于制造一个并集而非简单的覆盖。相当于Photoshop中图层的概念,优先级取决于你添加背景图片的顺序。
语法:
|
background-image: <bg-image> [ , <bg-image> ]*
<bg-image> = <image> | none
<strong>Note: a value of ‘none’ still generates a layer.</strong>
|
实例介绍:
|
background-image:url(sheep.png),url(betweengrassandsky.png);
|
CSS3 中加以此逗号同样支持以下属性:
background-repeat
- background-attachment
background-position
,
background-clip
,
background-origin
background-size
.
源码例子:
|
background-position:centerbottom,lefttop;
|
逗号分隔的属性,会从头到脚 一 一地 匹配,假设参数过少,则会使用最后末尾的属性来填充。
假设参数过多,则会自动舍弃,不予理会。
background的速记短语法 同样支持!
|
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>
|
实例介绍:
|
background:url(sheep.png)centerbottomno-repeat,url(betweengrassandsky.png)lefttopno-repeat;
|
浏览器兼容性:
支持 目前主流浏览器 及支持css3标准的所有浏览器。
例如: Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) ,Internet Explorer (9.0+) 等。
更多实例介绍:
Example A
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)lefttopno-repeat,url(ribbon.png)rightbottomno-repeat,url(old_paper.jpg)lefttopno-repeat;
}
|
Example B
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)lefttopno-repeat,url(right.png)righttopno-repeat,url(main.png)lefttoprepeat-x;
}
|
更多详细内容 请参考我的个人博客 http://gqcui.com/index.php/css3-background-were-set-multiple-background-images/