可以有两个背景图片吗?例如，我想有一个图像在顶部重复(repeat-x)，另一个在整个页面重复(repeat)，其中一个在整个页面是后面的一个在顶部重复。
我发现我可以通过设置html和body的背景来实现两个背景图像的预期效果:
html {
background: url(images/bg.png);
}
body {
background: url(images/bgtop.png) repeat-x;
}
这是“好的”CSS吗?有没有更好的方法?如果我想要三个或更多的背景图像呢?
当前回答
如果你想要多个背景图像，但不希望它们重叠，你可以使用下面的CSS:
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;
}
使用这个HTML结构:
<body
<?php body_class(); ?>>
<div id="topshadow">
</div>
<div id="pageborders">
<div id="page">
</div>
</div>
</body>
其他回答
当前版本的FF和IE以及其他一些浏览器支持在一个CSS2声明中包含多个背景图像。看这里http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/和这里http://www.quirksmode.org/css/multiple_backgrounds.html和这里http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
对于IE，您可以考虑添加一个行为。看这里:http://css3pie.com/
#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>
我们可以使用CSS3轻松地添加多个图像。我们可以在这里阅读详细信息http://www.w3schools.com/css/css3_backgrounds.asp
我发现在一个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。
是的，这是可能的，并且已经被流行的可用性测试网站Silverback实现了。如果你查看源代码，你可以看到背景是由几张图片组成的，它们相互叠加在一起。
下面这篇文章展示了如何使用维生素来达到这个效果。类似的包装“洋葱皮”层的概念可以在A List Apart中找到。
如果你想要多个背景图像，但不希望它们重叠，你可以使用下面的CSS:
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;
}
使用这个HTML结构:
<body
<?php body_class(); ?>>
<div id="topshadow">
</div>
<div id="pageborders">
<div id="page">
</div>
</div>
</body>
