是否可以同时拥有两个背景图像？例如，我想让一张图片在页面的顶部重复出现（repeat-x），另一张在整个页面上重复出现（repeat），而在顶部重复出现的那张图片应该位于覆盖整个页面的那张图片之上。
我发现我可以通过设置html和body的背景来实现两个背景图像的效果：
html {
background: url(images/bg.png);
}
body {
background: url(images/bgtop.png) repeat-x;
}
这是“好”的CSS吗？有更好的方法吗？如果我想要三个或更多背景图像怎么办？
CSS3允许这样的事情，它看起来像这样：
body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}
所有主要浏览器的当前版本都支持它，但是如果您需要支持IE8或更低版本，则最好的方法是使用额外的div进行解决：
<body>
<div id="bgTopDiv">
content here
</div>
</body>
body{
background-image: url(images/bg.png);
}
#bgTopDiv{
background-image: url(images/bgTop.png);
background-repeat: repeat-x;
}
我发现在一个div中使用两个不同的背景图片最简单的方法是使用以下代码：
body {
background:url(image1.png) repeat-x, url(image2.png) repeat;
}
显然，这不仅仅适用于网站的主体部分，您可以将其用于任何想要的 div 上。希望这有所帮助！我在我的博客上写了一篇更深入讲解的文章，如果有人需要进一步的说明或帮助，请访问http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div。
使用这个
body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}
使用 background-position: 调整每个图像的位置，并使用 background-repeat: 为每个图像分别设置重复属性，这是一种简单的方法。
body {
font-size: 13px;
font-family:Century Gothic, Helvetica, sans-serif;
color: #333;
text-align: center;
margin:0px;
padding: 25px;
}
#topshadow {
height: 62px
width:1030px;
margin: -62px
background-image: url(images/top-shadow.png);
}
#pageborders {
width:1030px;
min-height:100%;
margin:auto;
background:url(images/mid-shadow.png);
}
#bottomshadow {
margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}
#page {
text-align: left;
margin:62px, 0px, 20px;
background-color: white;
margin:auto;
padding:0px;
width:1000px;
}
<body
<?php body_class(); ?>>
<div id="topshadow">
</div>
<div id="pageborders">
<div id="page">
</div>
</div>
</body>
是的，这是可能的，并且已经被流行的可用性测试网站Silverback实现了。如果您查看源代码，您会发现背景由几个图像组成，叠放在一起。
这里是演示如何实现该效果的文章，可以在Vitamin上找到。类似的概念可以在A List Apart上找到，用于包装这些“洋葱皮”层。
#example1 {
background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
padding: 15px;
background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>