我可以有多个背景图片使用CSS吗？
我可以有多个背景图片使用CSS吗？
提问于 2009-01-08 03:37:17
可以有两个背景图像吗？例如，我想让一个图像在顶部重复( repeat -x)，并在整个页面上重复另一个( repeat )，其中整个页面上的图像在顶部重复的图像后面。
我发现通过设置html和body的背景可以达到两张背景图片想要的效果：
html {
background: url(images/bg.png);
}
body {
background: url(images/bgtop.png) repeat-x;
}这是“好的”CSS吗？有没有更好的方法？如果我想要三张或更多的背景图片呢？
回答 8
Stack Overflow用户
回答已采纳
发布于 2009-01-08 03:45:23
CSS3允许这种事情，它看起来是这样的：
body {
background-image: url(images/bgtop.png), url(images/bg.png);
background-repeat: repeat-x, repeat;
}但是，如果您需要支持IE8或更低版本，那么您可以解决的最好方法是使用额外的The current versions of all the major browsers now support it：
<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;
}Stack Overflow用户
发布于 2011-03-11 10:48:28
我找到的在一个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。
Stack Overflow用户
发布于 2013-07-23 16:27:11
使用这个
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;
}一种简单的方法来调整每个图像的位置与背景位置:和设置重复属性与背景-重复:为每个图像单独
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/423172
复制相关文章
相似问题