background-size: cover 要生效，必须设置 html 和 body 的 height: 100% 并清除 margin: 0，否则因容器未撑开而无法全屏覆盖；移动端优先用 height: 100% 而非 100vh 避免地址栏变化导致跳变。
直接用 background-size: cover 是最常用办法，但光写这一行几乎肯定失败——问题不在属性本身，而在容器没撑开。
为什么 background-size: cover 没铺满整个屏幕
浏览器里 body 默认只包裹内容高度，html 也默认不占满视口。就算你写了 background-size: cover，它只能缩放进一个“矮盒子”里，不是全屏。
-
html和body都必须设height: 100%（不是100vh），否则cover没参照高度 -
body默认有margin，必须显式设margin: 0，否则四周露白边 - 背景图要设在
html或body上；设在某个div里，就只铺满那个div - 移动端 Safari 动态改变地址栏高度时，
100vh会跳变，height: 100%更稳
background-size: cover 和 100% 100% 的关键区别
选哪个不看“好不好看”，看设计需求是否允许裁切。
-
background-size: cover：等比缩放后完全覆盖，可能裁掉上下或左右——适合氛围图、Banner -
background-size: 100% 100%：强制拉伸填满，宽高比丢失，图片变形——适合纯装饰、无关键内容的图 -
background-size: contain：等比缩放后完整显示，必然留白——不适合全屏，只适合 logo、图标等必须全见的场景 - 想保留全部内容又不留白？只能用
background-size: 100vw 100vh，但注意单位是vw/vh，不是%
移动端和 Safari 的实际坑点
不是 CSS 不支持，而是视口计算被干扰了。
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 地址栏收起/弹出时，
100vh值会变，导致背景图突然缩放或错位 - 某些安卓 WebView 对
100vh解析不准，建议优先用min-height: 100vh+height: 100%组合 -
background-attachment: fixed在 iOS 上常失效或触发卡顿，慎用 - 大图用
cover时，浏览器仍解码整张图——小屏加载大图浪费带宽，建议用image-set()或媒体查询切换分辨率
真正容易被忽略的，是 html 和 body 的基础约束，以及移动端 viewport 的动态影响。这两点没调对，后面所有优化都是徒劳。
