我來補充一下原因。

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

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是會縮放圖片，使得縮放后的圖片所占據(jù)的尺寸，在寬、高兩個維度上都要分別大于(或等于)容器的寬、高。

從這2個要點，其實可以得到結(jié)論，如果一個容器存在一定的寬和高(也就是都不為0)，那么background-size: cover;一定可以保證背景圖縮放至覆蓋滿整個容器。

但為什么題主發(fā)現(xiàn)不是這樣呢？

注意到用的是body這個元素，而body在不通過css定義高的情況下，其高度是取決于內(nèi)容的。那么，就可以想到，body的內(nèi)容高度可能沒有那么高，比如像下圖這樣：

這張圖內(nèi)可以看到body的高度只有100px(因為整個文檔里只有這一行文字內(nèi)容)。現(xiàn)在，再回頭考慮那2個要點。背景圖在保持比例的基礎(chǔ)上進行縮放，且滿足寬高分別超過body的寬高。顯然，這張圖只需要填滿那個小區(qū)域就足夠了。

為什么不繼續(xù)擴大一點呢？ 請注意W3C的那段話里的smallest。

所以，要保證覆蓋滿想要的整個區(qū)域，就讓body填滿整個區(qū)域，也就是為body和html添加height: 100%;。width: 100%;是不需要的，因為塊元素默認就是滿寬度。這就是 @Naraku_ 給的答案了。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。