Question

我在body和.wrap中设置了背景图片。我的问题是如何将背景放在它们之上？它是用CSS完成的，但我还没想到它。

中

谢谢。

<body>
    <div class="wrap">
    </div>
</body>

Answer 1

z-index： http://jsfiddle.net/7sdnU/2/

Answer 2

html元素也可以设置样式，因此您可以将背景图层移回一个元素。像这样：

html {
    background:url(bottom-background.png);
}
body {
    background:url(middle-background.png);
}
wrap {
    background:url(top-background.png);
}
/* Make sure everything takes up the whole viewport */
html, body, .wrap{
    height:100%;
    width:100%;
    padding:0; 
    margin:0; 
}

演示：http://jsfiddle.net/7sdnU/15/

你也可以添加另一个包装div：

<body>
    <div class="wrap">
        <div class="inner">
        </div>
    </div>
</body>

然后将“顶部”背景应用于.inner

但是，CSS3允许multiple backgrounds，所以你可能想看一下 - 如果你可以使用它，这是最好的解决方案，但它并不完全支持。

如何将背景图像放在身体背景图像上？

2 个答案: