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

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

不确定你是否解决了这个问题,但是我把头发撕掉了几天,谷歌没有任何帮助.我和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;
}

希望这可以帮助。