CSS3 background 分别设置多个背景图片【博主推荐】

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:centerbottom,lefttop; background-repeat:no-repeat; }

它是如何工作的呢？

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

语法：

 

 

 

 

 

XHTML

 

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

 

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

 

1	background-position:centerbottom,lefttop;

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

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

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

 

 

 

 

 

XHTML

 

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

实例介绍：

 

 

 

 

 

XHTML

 

1	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

 

 

 

 

 

XHTML

 

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

 

 

 

 

 

XHTML

 

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://ismartstudio.com/