最稳妥的全局背景写法是使用独立容器并设置min-height: 100vh，而非直接作用于body或html，以规避高度不足、优先级冲突及Bootstrap栅格干扰问题。
直接给 body 或 html 加 background-image 很大概率失败——不是代码写错，是高度、优先级、栅格干扰三重问题叠加。
为什么 body 上设 background-image 总是只显示一小块？
因为 body 默认高度由内容撑开，不是视口高度。哪怕写了 background-size: cover，图片也只覆盖那几行文字的高度区域，滚动后下方就是白底。
- 必须显式设置
html, body { height: 100%; margin: 0; }，否则100vh在某些嵌套场景下也会失效 -
body上若混用 Bootstrap 的bg-*类（比如bg-light），它的background-color会覆盖background-image—— 这些工具类不支持叠加，只会互斥 - 如果项目用了
.container包裹主内容，它自带的max-width和padding会让背景图在左右留白，视觉上“没铺满”
最稳妥的全局背景写法：独立容器 + min-height: 100vh
别硬怼 body，建一个专属容器，绕过 Bootstrap 栅格干扰：
<div class="global-bg">
<div class="container">
<!-- 你的内容 -->
</div>
</div>对应 CSS：
立即学习“前端免费学习笔记（深入）”；
.global-bg {
background-image: url("img/hero.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-color: #1a1a1a; /* 图片加载前的 fallback 色 */
min-height: 100vh;
}-
min-height: 100vh比height: 100vh安全，内容超长时不会被截断 -
background-color不可省——弱网或路径错误时，用户至少看到一致底色，不是闪白 - 路径必须带引号：
url("...")，漏引号会导致整条background-image声明静默失效
移动端 Safari 的背景图跳变怎么防？
iOS Safari 地址栏收起/弹出会动态改变 100vh 计算值，导致背景短暂裁顶或留白。
- 优先用
min-height: 100dvh替代100vh（dvh= dynamic viewport height），它响应地址栏变化 - 但注意兼容性：
100dvh在旧版 Safari 不支持，需加降级：min-height: 100vh; min-height: 100dvh; - 绝对不要加
background-attachment: fixed——移动端渲染卡顿、撕裂、错位，不是 Bootstrap 的锅，是浏览器限制
图片加载慢导致闪白或文字糊成一片？
背景图异步加载，而文字同步渲染，这是最隐蔽的体验断层。
- 用
background-color作降级色，选和图片主色调接近的深灰或浅灰 - 文字区域加半透遮罩：
<div class="bg-black bg-opacity-40 p-4">...，比单纯text-white可读性强得多 - 图片尺寸别超 1920×1080，格式优先 WebP；路径确保构建后仍有效（Webpack/Vite 中相对路径易出错）
真正难的不是写那四行 CSS，而是让图片在各种设备、各种网络、各种加载时机下，都稳稳撑住整个视口，且不抢走文字的注意力。
