CSS3实例分享之多重背景的实现(Multiple backgrounds)
更新时间：2014年05月20日 10:36:45 作者：
对于背景属性background-image大家应该已经很熟悉了，在CSS2中与它相关的属性还有background-repeat（设置背景是否重复及重复的方式）、background-position（设置背景图片在容器中的位置）、background-attachment（设置背景是否随页面一起滚动），通过这些属性来控制背景图片在容器中如何显示，但我们也只能为容器提供一张背景图片，如果我们想让一个容器的背景用多张图片实现，那么我们该如何去做呢？再在容器里添加一些无用的元素吗？
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
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="程序员之家">程序员之家</a>
</div>
CSS代码：
复制代码 代码如下:
.div1{
margin:50px auto;
width:700px;
height:450px;
border:10px dashed #ff00ff;
background-image:url(?article/images/1.jpg),url(?article/images/2.jpg),url(?article/images/3.jpg),url(?article/images/4.jpg),url(?article/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(?article/images/1.jpg) no-repeat top left,
url(?article/images/2.jpg) no-repeat top right,
url(?article/images/3.jpg) no-repeat bottom left,
url(?article/images/4.jpg) no-repeat bottom right,
url(?article/images/5.jpg) no-repeat center center;
...
}
哦了，CSS3多种背景就是这么回事儿，很简单吧。下面提供了完整的源码及示例，可以作为一个参考。
相关文章
对display:inline;与float:left;的认识
对display:inline;与float:left;的认识...2006-09-09
样式表CSS布局经验...2006-09-09
这篇文章主要介绍了div的offsetLeft与style.left区别的相关资料,需要的朋友可以参考下2016-09-09
DIV+CSS 网页TIP的简单作法...2006-09-09
这篇文章主要介绍了CSS将div内容垂直居中案例总结,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
marquee的详细用法解析...2006-08-08
巧用CSS滤镜做图案文字...2006-08-08
用CSS控制的闪烁效果...2006-09-09
130个漂亮CSS布局站点参考...2006-09-09
这篇文章主要介绍了sass 常用备忘案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
最新评论