CSS3 Multiple Backgrounds(转) -

edison87915

浏览: 199447 次
性别:
来自: 南京

最近访客更多访客>>

freepest

jidizhanshi0

limao.zhan

Helenhhj

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS3 Multiple Backgrounds(转)

博客分类：

CSS3

CSS3 Multiple Backgrounds原文

前面几节和大家一起学习了CSS3中给Background新追加的属性：《CSS3 Background-size》、《CSS3 Background-clip》和《CSS3 Background-origin》。这样一来，CSS3中的Background功能就更强大了，那么今天我要给大家推荐一个有关于Background的多背景使用——CSS3 Multipls Backgrounds。在开始介绍Multips Background之前，先来看一下CSS3和CSS2两个版本中的Background的区别：

CSS2中的Background属性：

   background: background-color || background-image || background-repeat || background-attachment || background-position;
   也可以分解写成：
   background-color: color值 || RGBA值；
   background-image: url();
   background-repeat: repeat || repeat-x || repeat-y || no-repeat;
   background-attachment: scroll || fixed;
   background-position: <length> || <per>

CSS3中的Background属性:

   background: background-image || background-position/background-size || background-repeat || background-attachment || background-clip || background-origin || background-color
   也可以分解写成：
   background-image: url();
   background-position: <length> || <per>
   background-size: <length> || <per>
   background-repeat: repeat || repeat-x || repeat-y || no-repeat;
   background-attachment: scroll || fixed;
   background-clip: padding-box || border-box || content-box;
   background-origin: padding-box || border-box || content-box;
   background-color: color值 || RGBA值；

这里有点特别需要注意，如果使用联写方式时，background-size需跟在background-position的后面，并用“/”隔着，即"background-position/background-size"。另外本人强烈建议CSS3中的Background属性不要全部联写，最好把CSS3中的属性拆分出来单独书写，因为他们在不同浏览器下需要加上自己的前缀，如：

   background: background-color || background-image || background-repeat || background-attachment || background-position;
   background-size: <length> || <per>
   background-clip: padding-box || border-box || content-box;
   background-origin: padding-box || border-box || content-box;

后面三个最好在运用时按前面介绍的，把各自的私有前缀加上。重温了一次两种标准下的Backgroud后，就正式进入今天的主题CSS3的多背景。

CSS3 Multiple backgrounds从字面而知，CSS3的多背景，其主要作用就是给同一个元素设置多个背景图像，换句话说，就是在同一元素上可以设置除 background-color外多个background的其它属性，因为一个元素只具备一个背景色，但自从有了CSS3后，可以让同一个元素同时具有多个背景图像，并可以给多个背景图像设置相同或不相同的 background-(position||repeat||clip||size||origin||attachment)。前面几句可能归纳的有点拗口，不太好理解，后面大家可以通过具体的实例来增加对他的理解。此时或许有朋友会问，那这个多背景我们在样式中要写backgrouds还是一样的 background呢？这个问题问得很好，在以前读书学英语时，复数往往会多一个“s”，那我在这里大声告诉大家，CSS3的多背景我们不使用 “backgrounds”而是继续使用"backgroud"，况且W3C也没有“backgrouds”,至于具体的语法如下所示：

  background ： [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],*
  也可以分解成：
  background-image: url1,url2,...,urlN;
  background-repeat: repeat1,repeat2,...,repeatN;
  background-position: position1,position2,...,positionN;
  background-size: size1,size2,...,sizeN;
  backrgound-attachment: attachment1,attachment2,...,attachmentN;
  background-clip: clip1,clip2,...,clipN;
  background-origin: origin1,origin2,...,originN;
  background-color: color;

取值说明：

1、background-image:此值用来设置元素的背景图片，可以使用相对地址或绝对地址索引背景图片，详细参考w3c的Background-image；

2、background-repeat:此值用来设置元素的背景图片的平铺方式，其默认值为repeat，详细参考w3c的background-repeat；

3、background-position:此值用来设置元素的背景图片的定位起点，其默认值为left top,详细参考w3c的background-position；

4、background-size: 此值用来设置元素的背景图片的尺寸大小，其默认值为auto，详细参考《CSS3 Background-size》；

5、background-attachment:此值用来设置元素的背景图片是否为固定显示，其默认值为scroll,详细参考background-attachment；

6、background-clip：此值用来控制元素的背景图片显示区域，其默认值为border-box，详细参考《CSS3 Background-clip》；

7、background-origin:此值用来控制元素的背景图片position的默认起始点，其默认值为padding-box,详细参考《CSS3 background-origin》;

8、background-color:此值用来设置元素的背景色，详细参考w3c的background-color。

其中background-image需要多个，但多个图片之间使用逗号隔开,而其他属性可以选择一个或多个，如果有多个背景图片时，其他属性只有一个时，那么表示所有背景图片应用了相同的属性设置，但background-color只能设置一个，如果你设置多少background-color将是一种错误的语法设置。

兼容的浏览器：

CSS3 Multiple Backgrounds在各支持的浏览器下都是统一写法，不需要加上自己的前缀，但如果你使用background-size,background-clip,background-origin时，还是需要另提出写上各浏览器的前缀。

上面主要介绍了一下CSS3 Multiple Backgrounds下的background与CSS2中的background区别，以及浏览器对其兼容等，下面我们一起来看一个实例：

设计要求：

需要制作成下图的效果：

此时为上面的效果切好五张背景图：

对于上面的效果制作，可能大家大脑闪出的结构会是这样的：

   <div class="box-wrp">
     <div class="tl">左上角背景图</div>
     <div class="tr">右上角背景图</div>
     <div class="content">我使用了五张背景图片。制作这样的效果</div>
     <div class="bl">左下角背景图</div>
     <div class="br">右下角背景图</div>
   </div>

然后分别在各个层上定位，马虎达到上面的效果，但是有一点大家实现起来是会非常困难的，因为我们四朵花是在边框下面的，当然用定位左弄右弄还是可以实现，当弄成效果一样时大家也累得够呛了。如果大家把思路换一下，使用今天所介绍的知识，做起来就轻松多了，下面我们就来看用CSS3 Multiple Backgrounds如何实现。

首先来看HTML标签，我们这里只需要使用一个标签就能实现了：

   <div class="demo multipleBg">我使用了五张背景图片。制作这样的效果</div>

先给这个DEMO加上下面的样式：

  .demo {
    width: 240px;
    border: 20px solid rgba(104, 104, 142,0.5);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding: 80px 60px;
    color: #f36;
    font-size: 25px;
    line-height: 1.5;
    text-align:center;
  }

接下来这步才是制作上面效果的关键一步，应用多背景：

  .multipleBg {
    background: url("../images/bg-tl.png") no-repeat left top,url("../images/bg-tr.png") no-repeat right top,url("../images/bg-bl.png") no-repeat left bottom,url("../images/bg-br.png") no-repeat right bottom,url("../images/bg-repeat.png") repeat left top;
   /*改变背景图片的position起始点，四朵花都是border边缘处起，而平铺背景是在paddin内边缘起*/
   -webkit-background-origin: border-box, border-box,border-box,border-box,padding-box;
   -moz-background-origin: border-box, border-box,border-box,border-box,padding-box;
   -o-background-origin: border-box, border-box,border-box,border-box,padding-box;
   background-origin: border-box, border-box,border-box,border-box,padding-box;
   /*控制背景图片的显示区域，所有背景图片超边border外边缘都将被剪切掉*/
   -moz-background-clip: border-box;
   -webkit-background-clip: border-box;
   -o-background-clip: border-box;
   background-clip: border-box;			
 }

上面效果等同于：

  .multipleBg {
    background-attachment: scroll, scroll, scroll, scroll, scroll;
    -webkit-background-clip: border-box;
    -o-background-clip: border-box;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../images/bg-tl.png"), url("../images/bg-tr.png"), url("../images/bg-bl.png"), url("../images/bg-br.png"), url("../images/bg-repeat.png");
    /*Firefox,Safari,Chrome早期版本支持background-origin语法格式*/
    -moz-background-origin: border, border, border, border, padding;
    -webkit-background-origin: border, border, border, border, padding;
    /*Firefox,Safari,Chrome现代版本支持background-origin语法格式*/
    -moz-background-origin: border-box, border-box, border-box, border-box, padding-box;
    -webkit-background-origin: border-box, border-box, border-box, border-box, padding-box;
    -o-background-origin: border-box, border-box, border-box, border-box, padding-box;
    background-origin: border-box, border-box, border-box, border-box, padding-box;
    background-position: left top, right top, left bottom, right bottom, left top;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
    background-size: auto auto, auto auto, auto auto, auto auto, auto auto;
  }

效果：

效果是不是跟展示的一样呀。效果是出来了，但有一点需要特别提醒大家，在应用多背景时，他的背景图片导入是有先后顺序的，越后面导入的背景图片越在下面，具体的我们来看一个扑克牌的DEMO：

现在有三张扑克牌背景图，需要把他们放在一个div元素中，并按从大到小显示：

首先看HTML代码：

  <div class="card bigToSmall"></div>

现在给这个card的div加上图所示的背景图：

  .card {				
    border: 1px solid #ccc;
    padding: 10px;
    height:100px; 
    width:120px;
  }
				
  .bigToSmall{
    background-image: url("../images/nine.png"),url("../images/eight.png"),url("../images/seven.png");
    background-position: 0 0pt, 15px 20px, 30px 40px;
    background-repeat: no-repeat;
    -moz-background-origin: content-box;
    -webkit-background-origin: content-box;
    -o-background-origin: content-box;
    background-origin: content-box;
 }

效果：

效果中明显是9-8-7排下来，而Demo中的背景图片顺序也是9-8-7的排列，下面来换一下，把背景从9-8-7换成7-8-9排列

  .bigSmallTo {
    background-image:url("../images/seven.png") ,url("../images/eight.png"),url("../images/nine.png");
    background-position: 0 0pt, 15px 20px, 30px 40px;
    background-repeat: no-repeat;
    -moz-background-origin: content-box;
    -webkit-background-origin: content-box;
    -o-background-origin: content-box;
    background-origin: content-box;
  }

效果：

上面扑克牌的实例再一次证明，多背景图片的显示顺序是跟其加载的先后顺序有关，并不跟定位的先后有关，感兴趣的朋友可以自己测试一下background-position能不能影响到多背景图片的层次显示关系。

CSS3 Multiple Backgrounds对多背景设置方便好用，但在IE6-8和Firefox3.5-等版本无法支持，这是一件遗憾的事情，但使用其制作圆角效果，Jeff推出一个jQuery插件，可是这个插件只对这一类风格的多背景制作起作用，如果有感兴趣的朋友可以到Chico Web Design查阅《Updated: jQuery Multiple Background Plug In》一文，这里详细介绍了如使用使用多背景和Jquery插件实现各浏览器下地圆角效果。我在这里就不再啰嗦了。

说到这里，CSS3中有关于背景的全部属性都介绍完了，最后规纳一下：CSS3一共给Background增加了四个新属性：background-size用来控制背景图片的尺寸，background-clip用来控制背景图片的显示区域,background-origin用来控制background-position起始原点，以及今天给大定介绍的CSS3 Multiple Background，用来给同一个元素设置多个背景图片。虽然这些属性有部分浏览器无法支持，但对于CSS3的爱好者来说我想是没有影响的，因为我们都是CSS3的探索者，希望这几篇能给大家带来一定的收获，如果你对他们有更好的理解，我愿随时与您分享您的成果。