我來補充一下原因。

首先，我測試了一下，的確存在這個問題。

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_ 給的答案了。

總結

以上是生活随笔為你收集整理的html背景图片压缩显示,css背景图片在浏览器缩小时为什么下面出现了白色的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。