background-size: cover 本身不负责“全屏”，它只缩放图片；真正铺满屏幕靠的是容器高度撑满视口——写错位置或漏掉基础尺寸控制，再大的图也只显示一丁点。
为什么 background-size: cover 没铺满整个屏幕
常见现象：背景只占顶部一条、左右留白、滚动时背景上滑脱节，甚至整张图消失。根本不是 cover 失效，而是它没容器可盖。
-
body默认高度由内容决定，可能只有 20px 高；cover就按这 20px 缩放图片，当然看不见效果 - 浏览器给
body设了默认margin，导致背景边缘被“挤出”视口 - 如果背景设在
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，而是理解它从不主动“全屏”——它只忠实地等比缩放，然后交由容器尺寸、定位上下文和渲染层叠规则共同决定最终是否可见、是否裁切、是否稳定。很多“失效”案例，其实只是容器塌陷了、父级没高度、或者伪元素 z-index 被内容遮住了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
