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

2022-01-30 00:00:00 background-image css

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

Is it possible to have two background images? For instance, I'd like to have one image repeat across the top (repeat-x), and another repeat across the entire page (repeat), where the one across the entire page is behind the one which repeats across the top.

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

I've found that I can achieve the desired effect for two background images by setting the background of html and body:

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

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

这是好"的 CSS 吗?有没有更好的方法?如果我想要三个或更多背景图片怎么办?

Is this "good" CSS? Is there a better method? And what if I wanted three or more background images?

推荐答案

CSS3 允许这样的事情，它看起来像这样:

CSS3 allows this sort of thing and it looks like this:

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

所有主流浏览器的当前版本现在都支持它，但是如果你需要支持 IE8 或更低版本，那么您可以解决它的最佳方法是拥有额外的 div:

The current versions of all the major browsers now support it, however if you need to support IE8 or below, then the best way you can work around it is to have extra divs:

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

相关文章