background-size: cover 本身不实现全屏，需配合 html/body 清边距、设高度及背景挂载于 html 才生效；cover 仅等比缩放，裁剪由容器尺寸与图片宽高比共同决定。
background-size: cover 本身不实现“全屏”，它只缩放图片；真正铺满视口靠的是容器高度控制、根元素重置和定位锚点——写错位置或漏掉任一环节，图再大也只显示一丁点。
为什么 background-size: cover 没铺满屏幕
常见现象：背景只占顶部一条、左右留白、滚动时上滑脱节，甚至整张图消失。根本不是 cover 失效，而是它没容器可盖。
-
body默认高度由内容撑开，可能只有 20px 高；cover就按这 20px 缩放图片，当然看不见效果 - 浏览器给
body设了默认margin: 8px（尤其 Chrome），导致背景被“挤出”视口边缘 - 如果背景设在
div上，而该div是 Flex 子项且未设align-items: stretch，它会收缩成内容高度 -
background-attachment: fixed在 iOS Safari（尤其旧版本）中常失效，造成滚动错位，但很多人误以为是cover问题
必须加的三行基础样式才能生效
不靠 JS、不换结构，纯 CSS 稳定生效的关键就这三步：
- 给
html和body清除默认边距：html, body { margin: 0; padding: 0; } - 确保根容器有明确高度参照：
html { height: 100%; }（比body { height: 100vh; }更稳，避免 iOS 地址栏收放抖动） - 把背景直接设在
html上，而不是body或某个div：html { background: url("bg.jpg") no-repeat center center / cover; }
注意：center center / cover 是 background-position 和 background-size 的简写，语义清晰且兼容性好。
移动端和高清屏容易踩的坑
background-size: cover 不管你用的是 1200px 还是 4K 图，浏览器只加载 background-image 里写的那一张。结果就是：iPhone 15 Pro 上拉伸发虚，低端安卓却下了一张 4K 图。
立即学习“前端免费学习笔记（深入）”；
- 优先用
image-set()提供多分辨率版本：background-image: image-set( url(img/bg-1200.jpg) 1x, url(img/bg-2400.jpg) 2x ); - 移动端宽高比差异大（如 iPhone 14 Pro 为 19.5:9），
cover必然裁剪——裁哪边取决于图片与容器宽高比谁更“窄”，人脸/按钮被切掉不是 bug，是设计行为 - 始终显式写
background-position: center center，不要依赖默认；少数安卓内核对50% 50%解析有偏差 -
background-attachment: fixed在 iOS Safari 上有性能问题，滑动可能卡顿；如需固定效果，建议用position: fixed+z-index叠加一层<img>替代
cover 和 contain 到底怎么选
选错就等于白配。两者行为差异极大，不是风格偏好，而是语义选择：
-
background-size: cover→ 图片等比放大，直到宽或高至少一个填满容器，多余部分裁剪。适合摄影类、氛围图，但必须配合background-position: center center防关键内容被切掉 -
background-size: contain→ 图片等比缩小，直到完全可见，四周必留白。适合 Logo、示意图、数据图表等需完整展示的场景 -
background-size: 100% 100%→ 强制拉伸，一定失真；仅当内容完整性不重要、且必须填满无裁剪时才考虑
真正难的不是写对那行 cover，而是理解它从不主动“全屏”——它只忠实地等比缩放，然后交由容器尺寸、定位和视口约束共同决定最终效果。
