我可以有多个背景图像使用CSS？ [英] Can I have multiple background images using CSS?
问题描述
有可能有两个背景图片吗？例如，我想在顶部重复一个图像（repeat-x），并且在整个页面上重复一遍（重复），其中整个页面上的图像位于在顶部重复的图像之后。 / p>
我发现我可以通过设置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;
}
所有主要浏览器的当前版本现在支持它，但是如果你需要支持IE8或更低版本，那么你可以解决它的最好的方法是有额外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;
}
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屋！
