我可以使用 CSS 拥有多个背景图像吗? [英] Can I have multiple background images using CSS?
问题描述
可以有两张背景图片吗?例如，我希望在顶部重复一个图像 (repeat-x)，并在整个页面上重复另一个图像 (repeat)，其中整个页面上的图像位于顶部重复的图像后面.
我发现通过设置html和body的背景可以让两张背景图片达到想要的效果:
html {背景:网址(图片/bg.png)；}身体 {背景: url(images/bgtop.png) 重复-x；}这是好"的 CSS 吗?有没有更好的方法?如果我想要三个或更多背景图片怎么办?
CSS3 允许这种事情，它看起来像这样:
body {背景图片:网址(图片/bgtop.png)，网址(图片/bg.png)；背景重复:重复-x，重复；}所有主要浏览器的当前版本现在都支持，但是如果您需要支持 IE8 或更低版本，那么解决它的最佳方法是拥有额外的 div:
<div id="bgTopDiv">内容在这里body{背景图片:网址(图片/bg.png)；}#bgTopDiv{背景图片:网址(图片/bgTop.png)；背景重复:重复-x；}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.
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;
}
Is this "good" CSS? Is there a better method? And what if I wanted three or more background images?
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;
}
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;
}
这篇关于我可以使用 CSS 拥有多个背景图像吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
