我可以使用CSS获得多张背景图片吗？

一尘不染

我可以使用CSS获得多张背景图片吗？

css

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

我发现通过设置html和body的背景，可以为两个背景图像实现所需的效果：

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

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

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

阅读 305

2020-05-16

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

2020-05-16