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/