Bootstrap 4 的 Jumbotron 需自定义类（如 .jumbotron-bg）设置 background-image、background-size: cover 和 background-position: center；必须设 min-height（如 100vh）防塌陷，注意路径相对 CSS 文件、iOS fixed 失效及小屏裁剪问题。
怎么给 Jumbotron 加背景图（不是纯色）
bootstrap 4 的 .jumbotron 默认只支持纯色背景（靠 bg-* 类），它本身不提供背景图能力——你直接写 background-image 是可以的，但必须手动覆盖默认样式，且要处理好尺寸、定位和容器高度问题。
- 别用
class="jumbotron bg-dark"想顺便塞张图，bg-dark只设background-color，会盖掉你的图片 - 必须单独定义一个 class（比如
.jumbotron-bg），在 CSS 里写background-image+background-size: cover -
.jumbotron默认 padding 很大、没有固定高度，背景图容易只显示顶部一条——得加height: 100vh或明确像素值（如min-height: 500px） - 如果想让它“全屏首屏”，记得同时设
margin-bottom: 0，否则 Bootstrap 默认的margin-bottom: 2rem会导致下方留白
为什么 background-size: cover 比 100% 100% 更常用
多数人想要的是“图居中、等比缩放、填满整个 Jumbotron 区域”，而不是把一张横图硬拉成竖框——后者会严重变形，人像变胖、文字糊掉。
-
background-size: cover：等比缩放，确保宽高至少有一个撑满容器，多余部分裁剪；需配合background-position: center center控制裁哪一块 -
background-size: 100% 100%：强制拉伸，完全放弃原始比例；仅适合抽象纹理、渐变底图等允许形变的场景 - 漏写
background-position时，cover 会默认从左上角开始铺，关键内容可能被裁掉，这是最常被忽略的一行
Jumbotron 背景图不显示的三个高频原因
写了 CSS 却看不到图，大概率卡在这三处，而不是路径或语法错误。
- 父容器没高度：
.jumbotron内容为空或太少，自身高度塌陷 → 必须加min-height或height（推荐min-height: 100vh） - Bootstrap 的
.container或.container-fluid套在外面，但加了overflow: hidden→ 背景图被意外裁掉，检查 wrapper 层样式 - 图片路径是相对路径，而 CSS 文件放在
/css/目录下，但图存在/img/→ 路径应相对于 CSS 文件位置，不是 HTML 页面位置（常见错写成url(../img/bg.jpg)实际应为url(../../img/bg.jpg)）
移动端适配与 fixed 背景的兼容性陷阱
加 background-attachment: fixed 让背景图不随滚动，视觉效果强，但在 iOS Safari 上基本失效——它会退化成 scroll，且可能引发页面卡顿或闪屏。
- 真要固定背景，优先用
position: fixed+z-index: -1的 div 叠在 Jumbotron 下方，更可控 - cover 在小屏上容易裁掉人脸或标题，可加媒体查询降级：
@media (max-width: 576px) { background-size: contain; } - 别在 Jumbotron 里放太多文字+背景图组合，iOS 系统字体渲染 + 半透明遮罩容易让文字发虚，实测用
text-shadow: 0 2px 4px rgba(0,0,0,.5)补救更可靠
背景图能不能撑满、会不会变形、在 iPhone 上还显不显示——这些都不是“加一行 CSS”能解决的，而是高度依赖容器尺寸控制、路径解析逻辑和移动端渲染特性。漏掉任意一环，图就只露个角。
