CSS3 Multiple Backgrounds

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

前面几节和大家一起学习了CSS3中给Background新追加的属性:《CSS3 Background-size》、《CSS3 Background-clip》和《CSS3 Background-origin》。这样一来,CSS3中的Background功能就更强大了,那么今天我要给大家推荐一个有关于Background的多背景使用——CSS3 Multipls Backgrounds。在开始介绍Multips Background之前,先来看一下CSS3CSS2两个版本中的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的探索者,希望这几篇能给大家带来一定的收获,如果你对他们有更好的理解,我愿随时与您分享您的成果。

如需转载烦请注明出处:W3CPLUS

返回顶部