0

我有一个巨大的背景图像，我需要 100% 100% 的比例。但我的问题是，如果网页是浏览器高度的 150%（所以浏览器是 1000x1000，而我的网站是 1000x1500），当您向下滚动查看网站的其余部分时，背景会重复并且不会缩小.

我的CSS是

html,body { width: 100%; height 100%; }
body { background: url(blah) no-repeat; background-size: 100% 100%; }

知道如何解决这个问题吗？

4

4 回答 4

1

这是关于该主题的一个很好的资源。

http://css-tricks.com/perfect-full-page-background-image/

希望能帮助到你。

于 2012-11-05T15:41:21.613 回答
1

就像 CSS-Tricks 文章解释的那样，您可以将 CSS 更改为：

html { 
    background: url(images/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这将确保您的背景图片覆盖整个页面，但仅在 CSS3 中受支持。像上面一样，您需要为每个主要浏览器包含特定的代码。

或者，尝试仅使用：

height: 100%;

或者

width: 100%

取决于与您的页面相关的图像大小，但这应该让图像调整到页面的正确高度/宽度，同时很好地保持纵横比。

于 2012-11-05T18:19:20.497 回答
0

尝试将背景图像应用于html。

于 2012-11-05T15:31:57.220 回答
0

如果宽度小于高度，则只需将宽度设置为 100%，否则将高度设置为 100%。您可能可以使用 javascript 来解决这个问题。

于 2012-11-05T15:32:13.053 回答