是否可以有两个背景图像?例如,我希望在顶部重复一个图像(repeat-x),并在整个页面上重复另一个图像(重复),整个页面上的一个重复在顶部重复 .
我发现通过设置html和body的背景,我可以达到两个背景图像的效果:
html {
background: url(images/bg.png);
}
body {
background: url(images/bgtop.png) repeat-x;
}
这是“好”的CSS吗?有更好的方法吗?如果我想要三个或更多背景图像怎么办?
8 回答
CSS3允许这种事情,它看起来像这样:
The current versions of all the major browsers now support it,但是如果您需要支持IE8或更低版本,那么解决它的最佳方法是增加额外的div:
我发现在一个div中使用两个不同背景图像的最简单方法是使用以下代码行:
显然,这不仅仅是网站的主体,你可以使用它为你想要的任何div .
希望有所帮助!如果有人需要进一步的指示或帮助,我的博客上有一篇帖子可以更深入地讨论这个问题 - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div .
用这个
使用background-position调整每个图像位置的简单方法:并使用background-repeat:为每个图像单独设置repeat属性
当前版本的FF和IE以及其他一些浏览器在单个CSS2声明中支持多个背景图像 . 看这里http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/和这里http://www.quirksmode.org/css/multiple_backgrounds.html和这里http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
对于IE,您可以考虑添加行为 . 看这里:http://css3pie.com/
是的,它是可能的,并且已经由流行的可用性测试网站Silverback实现 . 如果查看源代码,您可以看到背景由多个图像组成,彼此叠加 .
这篇文章演示如何在Vitamin上找到效果 . 包装这些'onion skin'层的类似概念可以在A List Apart上找到 .
如果您想要多个背景图像但不希望它们重叠,您可以使用此CSS:
使用此HTML结构:
我们可以使用CSS3轻松添加多个图像 . 我们可以在这里详细阅读http://www.w3schools.com/css/css3_backgrounds.asp
您可以为顶部创建一个div,一个背景,另一个用于主页面,并在页面内容之间分隔页面内容或将内容放在另一个z级别的浮动div中 . 你这样做的方式可能有用,但我怀疑它会在你遇到的每个浏览器上都有效 .