可以有两个背景图片吗?例如,我想有一个图像在顶部重复(repeat-x),另一个在整个页面重复(repeat),其中一个在整个页面是后面的一个在顶部重复。

我发现我可以通过设置html和body的背景来实现两个背景图像的预期效果:

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

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

这是“好的”CSS吗?有没有更好的方法?如果我想要三个或更多的背景图像呢?


当前回答

使用这个

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

一个简单的方法来调整你每个图像的位置与背景-位置:和设置重复属性与背景-重复:为每个图像单独

其他回答

你可以用一个div作为顶部的一个背景,另一个用于主页面,并在它们之间分离页面内容,或者将内容放在另一个z级的浮动div中。你的方法可能有用,但我怀疑它是否适用于你遇到的每一个浏览器。

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

使用这个

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

一个简单的方法来调整你每个图像的位置与背景-位置:和设置重复属性与背景-重复:为每个图像单独

我发现在一个div中使用两种不同的背景图像的最简单的方法是用这行代码:

body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

显然,这并不一定只适用于网站的主体,你可以使用任何你想要的div。

希望有帮助!如果有人需要进一步的指导或帮助,我的博客上有一篇文章更深入地讨论了这个问题——http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div。

是的,这是可能的,并且已经被流行的可用性测试网站Silverback实现了。如果你查看源代码,你可以看到背景是由几张图片组成的,它们相互叠加在一起。

下面这篇文章展示了如何使用维生素来达到这个效果。类似的包装“洋葱皮”层的概念可以在A List Apart中找到。