内容简介：对于背景属性background-image大家应该已经很熟悉了，在CSS2中与它相关的属性还有background-repeat（设置背景是否重复及重复的方式）、background-position（设置背景图片在容器中的位置）、background-attachment（设置背景是否随页面一起滚动），通过这些属性来控制背景图片在容器中如何显示，但我们也只能为容器提供一张背景图片，如果我们想让一个容器的背景用多张图片实现，那么我们该如何去做呢？再在容器里添加一些无用的元素吗？
CSS3的诞生为我们解决了这一问题，在CSS3里，通过background-image或者background可以为一个容器设置多张背景图像，也就是说可以把不同背景图象只放到一个块元素里。
首先我们来看一下语法吧：
background ： [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-attachment] | [background-position]
多个背景图片的url之间使用逗号隔开即可，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），那么所有背景图片都应用该属性值。
下面我们就看一个例子吧：
这里我们要使用5张图片作为一个div容器的背景，我们来看一下代码：
HTML代码：
<div class="div1">
<a href="#" title="Codercto.com">Codercto.com</a>
</div>
CSS代码：
.div1{
margin:50px auto;
width:700px;
height:450px;
border:10px dashed #ff00ff;
background-image:url(images/1.jpg),url(images/2.jpg),url(images/3.jpg),url(images/4.jpg),url(images/5.jpg);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right,center center;
}
效果如下图：
 |
在上面的代码中有这一句：
background-repeat:no-repeat;
写一个值就行了，效果是完全一样的。
当然上面设置背景图片的各个属性时是分开写的，那么我们也可以把背景图片的各个属性写在一块，这时的CSS代码如下：
.div1{
...
background:url(images/1.jpg) no-repeat top left,
url(images/2.jpg) no-repeat top right,
url(images/3.jpg) no-repeat bottom left,
url(images/4.jpg) no-repeat bottom right,
url(images/5.jpg) no-repeat center center;
...
}
哦了，CSS3多种背景就是这么回事儿，很简单吧。下面提供了完整的源码及示例，可以作为一个参考。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
JavaScript核心技术
Shelley Powers / 苏敬凯 / 机械工业出版社 / 2007-6 / 45.00
Ajax是当今Web开发领域最流行的词汇。而JavaScript与CSS、XML和DOM几种老技术，加上XMLHttpRequest就构成了Ajax的四大基石。对于JavaScript，一些更资深的同事告诉我的感觉是失望。面对不同的浏览器和浏览器的不同版本，没有优秀的调试开发工具，JavaScript成了软件开发的泥潭。. 而本书的出版则给我们增加了一丝解决这些问题的信心。 它从最简单......一起来看看 《JavaScript核心技术》 这本书的介绍吧!
