我可以使用 CSS 制作多个背景图片吗？

小编典典

我可以使用 CSS 制作多个背景图片吗？

all

是否可以有两个背景图像？例如，我想让一个图像在顶部重复（repeat-x），另一个在整个页面上重复（repeat），其中整个页面上的图像在顶部重复的图像后面。

我发现可以通过设置html和body的背景来实现两张背景图片想要的效果：

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

这是“好”的 CSS 吗？有没有更好的方法？如果我想要三个或更多背景图像怎么办？

阅读 81

2022-04-14

共1个答案

小编典典

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;
}

2022-04-14