background-size: cover 全屏失败主因是容器未撑开：html 和 body 需设 height: 100%、margin: 0，背景应设在 html/body；cover 会裁切，100% 100% 会变形，contain 必留白；移动端优先用 min-height: 100vh + height: 100%。
直接写 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%更稳
cover 和 100% 100% 的关键区别
选哪个不看“好不好看”，看设计需求是否允许裁切：
-
background-size: cover：等比缩放后完全覆盖，可能裁掉上下或左右——适合氛围图、Banner -
background-size: 100% 100%：强制拉伸填满，宽高比丢失，图片变形——适合纯装饰、无关键内容的图 -
background-size: contain：等比缩放后完整显示，必然留白——不适合全屏，只适合 logo、图标等必须全见的场景
移动端适配最容易被忽略的坑
iOS Safari 地址栏收起/展开时，100vh 会实时变化，导致背景图突然上移或下移。这不是 bug，是规范行为。
- 优先用
min-height: 100vh+height: 100%组合，而非单纯依赖100vh - 如果必须固定背景不动，
background-attachment: fixed在 iOS 上可能失效或触发渲染异常，慎用 - 关键内容（如人脸）被裁切？加
background-position: center center，并确保原图宽高比接近 16:9 或 4:3
真正麻烦的不是写哪几行 CSS，而是确认 html 和 body 的继承链是否被其他样式意外打断——比如某个 reset.css 重置了 height，或者框架注入了内联 style 覆盖了你的设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
