本网页展示了采用DIV+CSS网站制作技术实现多重背景图的技巧。DIV盒子的背景图可以为一个，也可以为多个，设置一个背景图一般网站制作人员都很熟悉，而本文由我们郑州网站建设公司所介绍的利用DIV+CSS网站制作技术实现多重背景图的技巧则少有人使用，本文就来介绍这个问题。本文后面提供的有源代码和插图说明，能够更深刻地让人理解如何实现多重背景图，实例中的源代码都已经过调试，可以正常地在复制到其他地方使用。下面我们郑州网站建设公司就来介绍一下，本文可供建站用户和网站建设技术人员参考。
对于DIV的背景属性background-image，与之相关的还有其他属性如background-repeat（设置背景是否重复及重复的方式）、background-position（设置背景图片在容器中的位置）、background-attachment（设置背景是否随页面一起滚动）等等，通过这些属性我们可以控制背景图片在容器中如何显示，通过background-image或者background可以为一个容器设置多张背景图像，也就是说可以把不同背景图象只放到一个块元素里。
background的用法如下所示：
background：[background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-attachment] | [background-position]
我们可以让多个背景图片的url之间使用逗号隔开，而且必须设置background-repeat的属性值为no-repeat。下面我们郑州网站建设公司再来提供了一个使用实例，并在后面提供了源代码，还提供了网页执行的图片如下，在这个图片中，有五幅图片作为 DIV盒子的背景图片，在源代码中采用了两种div的style的表达方式，两种实现方式都显示相同的结果。参见下面的源代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>采用DIV+CSS网站制作技术实现多重背景图（本实例由郑州网站建设公司--郑州凯讯公司提供）</title>
</head>
<style type="text/css">
.div1{
margin:50px auto;
width:400px;
height:300px;
border:3px dashed #ffaaff;
background-image:url(1.jpg),url(2.jpg),url(3.jpg),url(4.jpg),url(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;
}
.div2{
margin:50px auto;
width:400px;
height:300px;
border:3px dashed #ffaaff;
background:url(1.jpg) no-repeat top left,
url(2.jpg) no-repeat top right,
url(3.jpg) no-repeat bottom left,
url(4.jpg) no-repeat bottom right,
url(5.jpg) no-repeat center center;
}
</style>
<body>
<div class="div1">
<a href="#">这是DIV里的文字：郑州网站建设公司-郑州凯讯公司</a>
</div>
<br><br><br>
<div class="div2">
<a href="#">这是DIV里的文字：郑州网站建设公司-郑州凯讯公司</a>
</div>
</body>
</html
