前面几节和大家一起学习了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的探索者,希望这几篇能给大家带来一定的收获,如果你对他们有更好的理解,我愿随时与您分享您的成果。