Bootstrap 4 无内置背景图响应式工具类，需手写CSS并确保高度、background-size: cover、background-position: center、background-repeat: no-repeat四要素齐全；bg-类仅设背景色会覆盖背景图；容器需显式高度（如min-height: 100vh），避免flex塌陷；响应式换图须用媒体查询而非d-类；注意Safari兼容性及图片加载降级处理。
Bootstrap 4 没有内置的背景图响应式工具类，background-image 必须手写 CSS 实现，且关键四件套缺一不可：高度、background-size: cover、background-position: center、background-repeat: no-repeat。
为什么 bg-* 类不能设背景图？
Bootstrap 4 的 bg-primary、bg-dark 等类只设置 background-color，会直接覆盖你写的 background-image；哪怕叠加使用，CSS 层叠规则也会让颜色优先生效。别试图用 bg-image 或类似名字——它根本不存在。
- 常见错误现象：
<div class="bg-dark" style="background-image: url(...)">→ 只看到黑色，图完全不显示 - 真正生效的只有原生 CSS：
background-image+ 显式声明其他背景属性 - 如果你用了
.container包裹背景区域，注意它默认带左右padding，会导致图片“被框住”，视觉上不是全宽
background-size: cover 不生效的三个硬性前提
写了 cover 却没铺满？90% 是因为容器没撑开高度或尺寸约束错位。
- 父元素必须有明确高度：
min-height: 100vh（推荐）或height: 500px；height: auto+ 无内容 = 高度为 0，图直接消失 - 避免在
.row或空.col上直接设背景——它们默认height: auto，且可能受 Bootstrap 的flex布局影响导致高度塌陷 -
background-size: cover依赖background-position: center center才能居中裁切；漏掉这句，图可能偏左上角，关键内容被裁掉
移动端适配：用媒体查询切换图片源，不是靠 d-none d-md-block
Bootstrap 4 的显示隐藏类（如 d-none d-md-block）控制的是整个元素显隐，对 background-image 本身无效——它不会帮你换图，只会让容器消失。
立即学习“前端免费学习笔记（深入）”；
- 真要响应式换图，必须用 CSS 媒体查询覆盖
background-image值： .hero-bg {<br> background-image: url('bg-mobile.jpg');<br> background-size: cover;<br> background-position: center;<br> background-repeat: no-repeat;<br>}<br>@media (min-width: 768px) {<br> .hero-bg { background-image: url('bg-tablet.jpg'); }<br>}<br>@media (min-width: 992px) {<br> .hero-bg { background-image: url('bg-desktop.jpg'); }<br>}- 路径必须加引号：
url("bg.jpg")，漏引号或路径含空格会导致整条声明失效 - 不要在
内联属性里写媒体查询——浏览器不支持，必须进<style>或外链 CSS
容易被忽略的 Safari 和 iOS 兼容细节
在 iOS Safari 上，background-attachment: fixed 极易引发滚动撕裂或静音问题，且 100vh 在地址栏收起/展开时会跳动。这不是 Bootstrap 的锅，但你得主动绕开。
- 优先放弃
fixed，用纯cover + center更稳；若必须视差效果，改用transform: translateY()配合 JS 监听 scroll -
min-height: 100vh比height: 100vh安全——防内容超长时底部被截断 - 图片加载慢时页面闪白？加
background-color: #333作降级色，比留白体验好得多 - 如果背景图用于登录页或首屏，建议压缩移动版图到 ≤300KB，桌面版可保留高清，但别让同一张 2MB 图跑全端
