Question

body {
    margin:0;
    padding:0;
    position:relative;
    background:url(../images/imgs/backgrnd.png) no-repeat;
    background-size:cover;
}

background-size:cover在大多数情况下效果很好，调整大小通常不是问题，但在某些情况下，它会在页面底部留下一些大的白色条带。背景是1920x1080图片

Answer 1

不确定你是否解决了这个问题，但是我把头发撕掉了几天，Google无法帮助你。我和UI团队的工作人员进行了交谈，结果发现网页的主体不一定会覆盖整个页面的高度。将以下内容添加到我的css文件中完全解决了问题：

html {
    height: 100%;
}

body {
    background-size: cover;
    height: 100%;
}

这会拉伸身体的内容以适应窗户的整个高度。只是包括“身体”位对我有用，但我的同事告诉我，最好包括两者，因为有些浏览器只会有一个很有趣。

Answer 2

添加overflow:auto;以解决此问题。

对于实例，

body {
    margin:0;
    padding:0;
    position:relative;
    background:url(../images/imgs/backgrnd.png) no-repeat;
    background-size:cover;
    overflow:auto;
}

希望这有帮助。

Answer 3

也许您也可以尝试使用：

background-size:100% 100%;

只是一个建议

Answer 4

现在是 2021 年，我遇到了类似的问题，但没有一个解决方案适合我。

我设法弄明白了，希望这会对某人有所帮助。

您需要将视口高度和宽度设置为 100%。根据{{3}}，视口是网页的用户可见区域。这将通过设置最小高度来消除任何空白。

height: 100vh;
width: 100vw;

css3 background-size：覆盖在调整大小时留下空白区域

4 个答案: