全屏背景图在bootstrap中需用原生css实现，核心是解决容器高度塌陷、移动端vh偏差及栅格padding干扰；必须设html/body高100%、目标容器min-height:100vh、background-size:cover配center center，并清空.container默认间距。
全屏背景图在 Bootstrap 里不是加个 bg-image 类就能搞定的事——它根本不存在，所有依赖 utility class 实现背景图的尝试都会失败。真正起作用的只有原生 CSS 的 background-image，而“全屏”的核心障碍从来不是图片本身，是容器高度塌陷、vh 单位在移动端的行为偏差、以及 Bootstrap 自带 padding/margin 对视觉边界的干扰。
为什么 background-size: cover 看起来没铺满
常见现象：图片只显示左上角一块、被严重拉伸、或只在文字区域出现。根本原因不是 CSS 写错了，而是目标容器高度为 0 ——html 和 body 默认不占满视口，.container-fluid 也默认由内容撑高。
- 必须显式设置
html, body { height: 100%; }，否则height: 100vh在某些嵌套场景下也会失效 - 目标容器（比如
<section class="hero"></section>）要用min-height: 100vh，不是height: 100vh；后者内容超长时会被截断 -
background-size: cover必须配background-position: center center，否则居中偏移不易察觉 - 别用
background-size: 100% 100%—— 强制拉伸导致人像变形、文字糊成色块，iOS 和低端安卓机渲染更不可控
移动端 Safari 背景图顶部/底部被裁切
这不是 Bug，是 cover 的设计行为：它等比缩放至短边填满容器，长边必然溢出。手机竖屏高宽比远大于桌面，顶部和底部被砍掉一大截是正常结果。
- 要全图可见 → 改用
background-size: contain，但上下必留白 - 要铺满无白边 → 接受裁切，但通过
background-position把重点区域“捞”进可视区，例如center top保人脸、center bottom保标语 - 别信
height: 100vh能稳住：Safari 地址栏收起/弹出时，它按初始高度计算，不重绘，导致背景突然留白或裁切 - 优先用
min-height: 100vh，再配合height: 100dvh（现代浏览器支持），dvh响应地址栏变化
Bootstrap 栅格结构破坏背景图边缘
.container 默认有左右 padding，.row 有负 margin，叠加后实际内容区域缩进，背景图边缘被“挡住”，看起来像没铺满。
- 全屏区域尽量绕过
.container结构，直接用<section class="bg-hero"></section>这类自定义容器 - 如果必须嵌套栅格，在父容器加
mx-n3（抵消.row的-1remmargin）和px-0（清空.container的 padding） -
.container-fluid也有默认padding（0.5rem），加px-0 py-0清掉，否则边缘留白 - 调试时用 DevTools 查看 computed height，别只信样式面板里的声明 —— 实际最难调的从来不是
100vh写没写对，而是它和padding、gap、滚动条共存时的隐性相互作用
背景图加载失败或闪白怎么办
网络差、路径错、CDN 返回 404，都会导致背景图空白，而页面其他部分照常渲染，显得突兀。
- 用 fallback 色：在
background-image前写一层background-color，比如#f8f9fa（Bootstrap 的$gray-100） - 路径别用相对路径如
../img/bg.jpg，优先用绝对路径或 Webpack 配置的~别名 - 检查 Network 面板，确认图片返回状态码是
200，不是404或403 - 大图务必压缩，WebP 比 JPEG 小 25%~30%，首屏加载速度影响明显；
<picture></picture>对<img>有效，但 CSS 背景图不支持降级
最易被忽略的点是三层高度继承链：html → body → 目标容器。只要其中任一环没设高、或被 Bootstrap 的 spacing 工具意外压缩，背景图就永远铺不满。这不是写法问题，是布局逻辑问题。
