2

我正忙着将我的 HTML 网站放入 wordpress 模板中。到目前为止它正在工作，但我被困在后台。在大页面上，背景停止并显示一个大的空白区域。

背景由条纹组成，但也有从暗（上）到亮（下）的渐变渐变。

我正在尝试将背景拉伸到屏幕底部。这适用于小于我的屏幕的页面，但我需要向下滚动的较大页面，背景停止并显示一个大的空白区域。

我在这里需要一些帮助 - 我尝试了很多解决方案，其中一些解决了我的大页面问题，但问题存在于较小的页面。我希望有一个解决方案可以在每一页上一直向下拉伸这个背景。

当前代码（适用于小页面，但在大页面上存在问题）

html
{
    background: url(images/lines-bg.png);
    background-repeat: repeat-x;
}

但是当我将它添加到 html css 时，问题就会出现在小页面上。

    background-size: auto 100%;

我还希望背景是可滚动的，而不是固定的。

非常感谢！

4

3 回答 3

1

我发现了如何解决这个问题，我将 css 代码从 html 移动到 body 并添加了一些额外的东西来确保：

html
{
    min-height:100%;    
}

body
{
    min-height:100%;
    background: url(images/lines-bg.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
}
于 2013-08-09T12:59:03.837 回答
1

如果您不必支持超旧浏览器，则可以尝试 2 件事：

即使在滚动时，您也可以使用background-attachment: fixed;修复背景加载到页面的初始方式的属性。

或者您可以使用background-size:cover;拉伸背景的属性来动态覆盖内容区域的大小。这并不总是最好的解决方案，因为图像质量可能会成为一个问题，并且不同的页面长度会产生不一致的背景。

于 2013-07-21T16:21:55.560 回答
0

背景有多大？当您说background-size: auto 100%它将背景图像设置为其大小的 100% 时。例如：如果一个图像是 100 像素，而你background-size: auto 100%说它会告诉图像是 100 像素，如果你这样做background-size: auto 50%了，它会告诉图像是 50 像素。我相信这是你的问题。

于 2013-07-21T16:26:45.350 回答