如何用CSS实现背景图片全屏显示？

background-size: cover 要生效，必须设置 html 和 body 的 height: 100% 并清除 margin: 0，否则因容器未撑开而无法全屏覆盖；移动端优先用 height: 100% 而非 100vh 避免地址栏变化导致跳变。

直接用 background-size: cover 是最常用办法，但光写这一行几乎肯定失败——问题不在属性本身，而在容器没撑开。

为什么 background-size: cover 没铺满整个屏幕

浏览器里 body 默认只包裹内容高度，html 也默认不占满视口。就算你写了 background-size: cover，它只能缩放进一个“矮盒子”里，不是全屏。

1. html 和 body 都必须设 height: 100%（不是 100vh），否则 cover 没参照高度
2. body 默认有 margin，必须显式设 margin: 0，否则四周露白边
3. 背景图要设在 html 或 body 上；设在某个 div 里，就只铺满那个 div
4. 移动端 Safari 动态改变地址栏高度时，100vh 会跳变，height: 100% 更稳

background-size: cover 和 100% 100% 的关键区别

选哪个不看“好不好看”，看设计需求是否允许裁切。

1. background-size: cover：等比缩放后完全覆盖，可能裁掉上下或左右——适合氛围图、Banner
2. background-size: 100% 100%：强制拉伸填满，宽高比丢失，图片变形——适合纯装饰、无关键内容的图
3. background-size: contain：等比缩放后完整显示，必然留白——不适合全屏，只适合 logo、图标等必须全见的场景
4. 想保留全部内容又不留白？只能用 background-size: 100vw 100vh，但注意单位是 vw/vh，不是 %

移动端和 Safari 的实际坑点

不是 CSS 不支持，而是视口计算被干扰了。

1. iOS Safari 地址栏收起/弹出时，100vh 值会变，导致背景图突然缩放或错位
2. 某些安卓 WebView 对 100vh 解析不准，建议优先用 min-height: 100vh + height: 100% 组合
3. background-attachment: fixed 在 iOS 上常失效或触发卡顿，慎用
4. 大图用 cover 时，浏览器仍解码整张图——小屏加载大图浪费带宽，建议用 image-set() 或媒体查询切换分辨率

真正容易被忽略的，是 html 和 body 的基础约束，以及移动端 viewport 的动态影响。这两点没调对，后面所有优化都是徒劳。