css背景图片在浏览器缩小时为什么下面出现了白色的

Question

我的解决方案是设置background-color:black;但是我想了解为什么我设置了background-size:cover;为什么不行呢？

设置背景代码：
body{
background-image: url(../images/bg.jpg);background-size: cover;
background-repeat: no-repeat;
color: #ccc;
max-height: 100%;
max-width: 100%;
}

w3c中文网的解释是：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
求解释。。。。

Answer 1

我们都正常显示

Answer 2

我来补充一下原因。

首先，我测试了一下，的确存在这个问题。

w3c对background-size: cover;的解释（http://www.w3.org/TR/css3-background/#the-background-size）是

Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

这里有2个要点。1是保持图片自身的宽高比不变。2是会缩放图片，使得缩放后的图片所占据的尺寸，在宽、高两个维度上都要分别大于（或等于）容器的宽、高。

从这2个要点，其实可以得到结论，如果一个容器存在一定的宽和高（也就是都不为0），那么background-size: cover;一定可以保证背景图缩放至覆盖满整个容器。

但为什么题主发现不是这样呢？

注意到用的是body这个元素，而body在不通过css定义高的情况下，其高度是取决于内容的。那么，就可以想到，body的内容高度可能没有那么高，比如像下图这样：

这张图内可以看到body的高度只有100px(因为整个文档里只有这一行文字内容)。现在，再回头考虑那2个要点。背景图在保持比例的基础上进行缩放，且满足宽高分别超过body的宽高。显然，这张图只需要填满那个小区域就足够了。

为什么不继续扩大一点呢？ 请注意W3C的那段话里的smallest。

所以，要保证覆盖满想要的整个区域，就让body填满整个区域，也就是为body和html添加height: 100%;。width: 100%;是不需要的，因为块元素默认就是满宽度。这就是 @Naraku_ 给的答案了。

W3C官方的文档大都不易阅读，推荐看MDN的：
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_backgro...

Answer 3

height: calc(100vh - 120px);/计算浏览器高度/
background-size:100% 100%;/背景图片宽高百分之百显示/