根本原因是容器无高度，导致background-size: cover失去参照；应设min-height: 100vh（或100dvh）于背景图所在元素，并配background-position: center center和background-repeat: no-repeat。
为什么 background-image 高度不随屏幕变化？
根本原因是容器没高度，不是图片没加载或路径错了。Bootstrap 的 .container、.row 默认由内容撑高，background-image 一旦没明确高度，background-size: cover 就失去参照——它不知道“覆盖谁”。你看到的“只显示一截”，其实是容器本身只有 20px 高。
常见错误现象：min-height: 100% 失效、h-100 工具类没反应、浏览器缩放后背景突然塌陷。
-
min-height: 100vh是最直接解法，强制容器至少占满视口高度 - 若需适配移动端地址栏遮挡（如 Safari 滚动时），改用
min-height: 100dvh（2026 年已广泛支持） - 别依赖
html, body { height: 100% }—— 它在嵌套深、有 flex 布局时容易断链 - 如果背景图设在
.row上，记得给它的父级（比如.container-fluid）也加min-height，否则父级塌陷，子级再设也白搭
如何让背景图在不同设备上都“刚好铺满”？
background-size: cover 是响应式高度下的默认选择，但它不是万能的——铺满的前提是容器高度可预期。一旦你用了 min-height: 100vh，cover 才真正开始工作；否则它只是按“0px 高”去缩放，结果就是图片缩成一条线。
- 必须配
background-position: center center，否则裁剪点飘忽，小屏下人脸可能被切掉 -
background-repeat: no-repeat要显式写，某些缩放临界点（如系统 DPI 设为 125%）会意外触发平铺 - 避免用
height: 100vh替代min-height：内容超长时，height会把容器锁死，文字溢出或滚动失效 - 如果背景图用于 banner 区域且下方接其他内容，建议用
min-height: 100vh+padding-bottom: 4rem留出安全间距，防止文字被底部固定导航遮住
为什么加了 min-height 还是留白或错位？
大概率是父级容器用了 Bootstrap 的栅格类但没处理好高度继承。典型结构：<div class="container"><div class="row bg-hero"> —— 这里 <code>.row 默认 min-height: auto，而 .container 又没设高度，整个链路就断了。
- 检查开发者工具中该元素的 Computed Height，确认是否真为
100vh（不是auto或0px） - 删掉所有干扰的
bg-*类（如bg-light），它们会通过background-color覆盖background-image - 如果用了
position: relative做文字层定位，确保它加在同一个容器上，而不是子元素——否则高度计算仍以子元素为准 - 在 iOS Safari 中，
100vh会被地址栏高度影响，此时100dvh更稳；但旧版 Safari 不支持，可用 JS 回退：document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px')，然后 CSS 里用min-height: calc(var(--vh) * 100)
移动端 Safari 下背景图突然消失或错位
不是路径问题，也不是 CSS 写错，而是 background-attachment: fixed 在 iOS 上被禁用或降级处理了。很多“全屏视差”方案在桌面端正常，到 iPhone 上就偏移、抖动甚至空白。
- 除非设计稿明确要求视差效果，否则直接去掉
background-attachment: fixed - 如果必须保留，把背景层抽出来独立于 Bootstrap 栅格，用
position: fixed+z-index控制层级，再用top: 0; left: 0; width: 100%; height: 100%显式撑开 - 注意：fixed 背景无法响应容器 padding/margin，文字层必须用
position: relative单独包裹，不能指望它自动对齐栅格边距 - 高 DPR 屏（如 iPhone 15 Pro）下图模糊？那不是响应式问题，是图源分辨率不足——1920×1080 的图在 3x 屏上会被拉伸渲染，得提供
@2x/@3x版本或改用image-set()（但兼容性有限，慎用）
实际项目中最容易被忽略的，是「高度声明必须落在背景图所在的那个 DOM 元素上」，而不是它的父级或子级。哪怕只差一层，min-height 就可能被栅格类重置或被 flex 布局忽略。
