background-size: cover 最可靠但单独使用必失效，必须同时设置 margin: 0、min-height: 100vh 和 background-repeat: no-repeat，否则因容器高度为0、路径错误或缺失配套声明导致铺不满。
background-size: cover是最常用且可靠的解法，但直接写这行代码大概率不生效——核心问题从来不是属性本身，而是容器没高度、路径算错、或漏了关键配套声明。
为什么 background-size: cover 没填满屏幕
最常见原因：目标元素（比如 body 或某个 div）实际高度为 0。
-
body默认有margin，且自身不继承视口高度；只设background-size: cover，图根本没地方画 - 必须同时加：
margin: 0（清全局外边距）、min-height: 100vh（不是height: 100%）、background-repeat: no-repeat - 如果用在子级
div上，它必须有明确宽高，或靠内容撑开——CSS 背景图不会反向撑高父容器
cover 和 contain 到底怎么选
二者语义和行为完全不同，选错会导致关键内容被切掉或留白难看。
-
cover：等比缩放至短边刚好撑满容器，长边溢出并裁剪。适合全屏氛围图、Banner、首屏视觉冲击场景 -
contain：等比缩放至长边刚好贴住容器边缘，短边留白。适合 Logo、图标、带文字说明的背景图 -
100% 100%是强制拉伸，人像/文字类图必变形，仅当明确接受失真时才考虑
路径正确但图片不显示？先查这三处
浏览器控制台报 404，90% 不是代码写错，而是路径解析逻辑被忽略。
- CSS 中的
url()路径，永远相对于 CSS 文件位置，不是 HTML 文件——比如 CSS 在/static/css/main.css，图在/static/images/bg.jpg，就得写url("../images/bg.jpg") - 本地双击打开 HTML（
file://协议）时，Chrome/Firefox 会拦截background-image加载；改用python3 -m http.server启服务再测 - Linux 服务器大小写敏感：
bg.jpg≠bg.JPG；开发时没报错 ≠ 上线能用
移动端 background-attachment: fixed 别硬上
iOS Safari 和多数安卓 WebView 对该属性支持极差：滚动卡顿、闪烁、背景直接消失——这不是你代码的问题，是渲染引擎限制。
- 真要实现视差效果，改用 JS 控制
transform: translateY()或position: sticky模拟 - 千万别把
fixed和cover绑一起用，移动端基本等于放弃兼容性 - 绝大多数场景下，直接删掉
background-attachment: fixed反而更稳
真正卡住人的，往往不是 cover 本身，而是它依赖的上下文：容器高度是否真实存在、路径是否按 CSS 文件位置计算、移动端是否悄悄失效。这些点不逐个验证，调一百遍 background-size 都没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
