background-size: cover 必须配 height 链，因为其缩放依赖容器尺寸；html 和 body 均需设高度（如 html{height:100%}、body{min-height:100vh}），否则容器高度塌陷，cover 仅在几像素内缩放，无法铺满视口。
background-size: cover 为什么必须配 height 链
单独写 background-size: cover 几乎肯定失效——浏览器根本不知道“全屏”指多高。body 默认高度只包裹内容，不是视口。DevTools 里点开 body 的 Computed 标签，常看到 height 是 24px 或更小。
必须显式打通高度链：html 和 body 都要参与：
-
html { height: 100%; }：让 html 高度继承自根，为后续提供基准 -
body { margin: 0; min-height: 100vh; }：用min-height而非height，避免内容超长时背景被截断
漏掉任意一环，cover 就只是缩放一张图，而不是铺满窗口。
为什么 background-attachment: fixed 会引发拉伸或错位
加了 background-attachment: fixed 后，部分 Safari（尤其 iOS）和旧版 Chrome 会出现背景图在 resize 时卡顿、偏移甚至短暂拉伸。这不是 bug，而是 fixed 模式下浏览器对视口尺寸变化的重绘延迟导致的视觉假象。
立即学习“前端免费学习笔记（深入）”；
更稳妥的做法是不用 fixed，改用以下组合：
- 把背景图设在
<div class="hero-bg">这类独立容器上 - 容器设
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; - 再配
background-size: cover; background-position: center;
这样既保持固定视觉效果，又绕过 body 上 fixed 的兼容性坑。
移动端窗口变化时图片突然裁剪过度怎么办
横竖屏切换或键盘弹出时，100vh 在某些 Android 和 iOS 版本中会返回“视口可用高度”，而非“屏幕物理高度”，导致背景容器高度突变，关键内容（比如人脸、Logo）被意外裁掉。
解决办法不是换属性，而是微调锚点：
- 用
background-position: center top;把构图重心压向顶部（适合 Banner 文字在下方） - 或
background-position: center 30%;显式控制垂直偏移，比纯center更可控 - 必要时加媒体查询：
@media (max-height: 500px) { .hero-bg { background-position: center 20%; } }
别指望 cover 自动聪明裁剪——它只保证填满，不保证构图安全。
路径错误和 CSS 覆盖导致 background 不生效的排查顺序
最常被忽略的不是写法，而是执行环境：
- 检查图片路径是否相对于 HTML 文件——
url(images/bg.jpg)和url(/images/bg.jpg)完全不同 - 用浏览器 DevTools 的 Network 标签看图片是否 404；Elements 里看 computed background-image 是否为空
- 搜索是否有其他样式覆盖：
body上的background简写（如background: #000;）会清空background-image - 确认没被更高优先级的选择器（比如
body.custom-theme）里的 background 规则覆盖
真正可靠的全屏背景，90% 的问题出在路径、高度链、覆盖这三处，而不是 cover 本身不可靠。
