css - 我可以使用 CSS 拥有多个背景图像吗？

是否可以有两张背景图片？例如，我想让一张图片在顶部重复 (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;
}

The current versions of all the major browsers now support it ，但是，如果您需要支持 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;
}

关于css - 我可以使用 CSS 拥有多个背景图像吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/423172/

相关文章：

android - 具有颜色和背景图像的按钮