CSS3 Multiple Background

最新推荐文章于 2021-06-04 20:32:39 发布

编程之上

最新推荐文章于 2021-06-04 20:32:39 发布

阅读量1.3k

点赞数

分类专栏： css&css3

本文链接：https://blog.csdn.net/ruizhengyun/article/details/8818718

版权

css&css3 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

先睹为快

今天推荐一个有关于Background的多背景使用——CSS3 Multipls Backgrounds。

先作个对比
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;

CSS3 Multiple backgrounds从字面而知，CSS3的多背景，其主要作用就是给同一个元素设置多个背景图像，换句话说，就是在同一元素上可以设置除background-color外多个background的其它属性，因为一个元素只具备一个背景色，但自从有了CSS3后，可以让同一个元素同时具有多个背景图像，并可以给多个背景图像设置相同或不相同的，具体的语法如下所示：

  background-(position||repeat||clip||size||origin||attachment)
  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:此值用来设置元素的背景图片，可以使用相对地址或绝对地址索引背景图片，
2、background-repeat:此值用来设置元素的背景图片的平铺方式，其默认值为repeat
3、background-position:此值用来设置元素的背景图片的定位起点，其默认值为left top,
4、background-size: 此值用来设置元素的背景图片的尺寸大小，其默认值为auto，
5、background-attachment:此值用来设置元素的背景图片是否为固定显示，其默认值为scroll,
6、background-clip：此值用来控制元素的背景图片显示区域，其默认值为border-box，
7、background-origin:此值用来控制元素的背景图片position的默认起始点，其默认值为padding-box,
其中background-image需要多个，但多个图片之间使用逗号隔开,而其他属性可以选择一个或多个，如果有多个背景图片时，其他属性只有一个时，那么表示所有背景图片应用了相同的属性设置，但background-color只能设置一个，如果你设置多少background-color将是一种错误的语法设置。CSS3 Multiple Backgrounds在各支持的浏览器下都是统一写法，不需要加上自己的前缀，但如果你使用background-size,background-clip,background-origin时，还是需要另提出写上各浏览器的前缀。

DEMO

需要完成的效果

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

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

<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>

C SS3只需要使用一个标签就能实现了，简单吧：
HTML code

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

CSS code

 .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 code

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

CSS code

.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;
 }

效果：

上面扑克牌的实例再一次证明，多背景图片的显示顺序是跟其加载的先后顺序有关，并不跟定位的先后有关，感兴趣的朋友可以自己测试一下background-position能不能影响到多背景图片的层次显示关系。
CSS3 Multiple Backgrounds对多背景设置方便好用，但在IE6-8和Firefox3.5-等版本无法支持，这是一件遗憾的事情。
最后规纳一下：CSS3一共给Background增加了四个新属性：
background-size用来控制背景图片的尺寸，
background-clip用来控制背景图片的显示区域,
background-origin用来控制background-position起始原点
CSS3 Multiple Background用来给同一个元素设置多个背景图片。