`

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

阅读更多

CSS3允许给box/div元素设置多个背景图片,只需要在原来的基础上加逗号分隔即可分别设置。

支持 Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) ,Internet Explorer (9.0+) 等。

先上一个小例子,一只羊的png图片背景和草原的大背景 可以分别设置。效果如下:

代码如下:

它是如何工作的呢?

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

语法:
实例介绍:

CSS3 中加以此逗号同样支持以下属性:

 

  1. background-repeat
  2. background-attachment
  3. background-position
  4. background-clip,
  5. background-origin 
  6. background-size.

源码例子:

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

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

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

实例介绍:

浏览器兼容性:

支持 目前主流浏览器 及支持css3标准的所有浏览器。

例如: Mozilla Firefox (3.6+), Safari/Chrome (1.0/1.3+), Opera (10.5+) ,Internet Explorer (9.0+) 等。

更多实例介绍:

Example A

Example B

 更多内容 请参考我的个人博客 http://ismartstudio.com/

0
1
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics