Question

我想在网页上的平铺背景上放置一个带有透明度（白色列）的PNG。它应该在整个页面上垂直（而不是水平）拉伸/平铺。我只是使用CSS和HTML。我猜我对DIV和CSS的理解是缺乏的，为此我道歉。这是我所拥有的，因为大量的摆弄：

body { 
    background-image:url(bin/back.png);
    background-position:left bottom;
}
#second-background {
    position:absolute;
    height:100%;
    top:0;
    margin: auto;
    background-image: url(bin/column.png);
    background-repeat: repeat-y ;
}

它正在显示但我不能让它居中，最重要的是它取代了我的其余内容。我已经阅读了如何重新创造 - 对于维他命的重建 - 银背 - 视差效应，但我不能让它自己工作。

Here's指向演示的链接，您可以在其中看到它。

Answer 1

我认为您需要在#second-background上设置固定宽度。否则，没有任何内容，它没有宽度。

编辑：对不起，我没有仔细阅读您的问题。让我查看演示并进一步调查。

修改2：好的，如果您希望整个页面上的白色列图像居中，那么您需要将#second-background设置为width: 100%;和{{ 1}}。这也可以让background-position: center top;正确居中。

如果这不是你想要的，请告诉我。

Answer 2

我在这里做了一些假设，但我认为它会成功：

首先，将其添加到CSS顶部附近：

html, body {
    margin:0; padding:0; border:0
}

在#second-background上，添加width: 100%。
在#second background上，添加background-position: center top或废弃所有background-媒体资源，并将其替换为：background: url(bin/column.png) repeat-y center top。

使用Firebug在Firefox中测试。

如果您希望我解释为什么这些更改有效，请询问。

为什么我的透明'第二'背景图像中心不会？

2 个答案: