Bootstrap Jumbotron需手动设置background-image，推荐组合：cover+center center+no-repeat；v4需注意路径与MIME类型，v5已移除该类，应自定义.hero-section替代。
用 background-image 设置 Jumbotron 背景图
bootstrap 的 jumbotron（v4 及更早）本身不提供内置的背景图支持，必须手动用 css 控制 background-image。直接给 .jumbotron 元素加 style="background-image: url(...)” 是最直接的方式，但要注意路径是否可访问——本地文件协议（file://）下很多浏览器会拒绝加载，务必走 http 服务（如 localhost 或部署后环境）。
常见错误是写成：<div class="jumbotron" style="background-image: url(./img/bg.jpg)">，结果图片不显示。原因通常是路径错误或 MIME 类型不匹配（比如服务器没配好 <code>.jpg 类型）。建议先在浏览器开发者工具里检查 Network 标签页，确认图片请求返回 200。
让背景图居中且不拉伸变形
仅设 background-image 不够，必须配合 background-size 和 background-position 才能真正居中。默认值 background-size: auto 会导致图片按原始尺寸铺满，常出现裁剪或留白。
-
background-size: cover：等比缩放填满容器，可能裁剪边缘，适合强调构图中心 -
background-size: contain：等比缩放完整显示全图，可能留白，适合信息图类背景 -
background-position: center center：确保对齐中心点（两个center分别控制 X/Y） -
background-repeat: no-repeat：防止平铺，几乎总是需要
推荐组合：background-size: cover; background-position: center center; background-repeat: no-repeat;
解决文字被背景图“吃掉”的对比度问题
背景图一旦加上，原有白色文字很容易看不清，尤其当图中有亮色区域。不能只靠改文字颜色——深图配白字、浅图配黑字，动态适配成本高。更稳妥的做法是加一层半透明遮罩：
在 .jumbotron 内部最外层加一个伪元素：
.jumbotron::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0,0,0,0.3);
z-index: 1;
}再把文字内容包进一个 <div class="container"> 并设 <code>position: relative; z-index: 2;。这样遮罩压在图上、文字浮在遮罩上，对比度可控，也不影响响应式布局。
Bootstrap 5 中 Jumbotron 已移除，需自定义
Bootstrap 5 官方删掉了 .jumbotron 类，文档明确建议用 .bg-light + .py-5 等实用类组合替代。如果你项目已升级到 v5，继续用 .jumbotron 会失效。此时要自己定义一个类，比如：
.hero-section {
padding: 3rem 0;
background-image: url('./img/hero.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}然后在 HTML 中用 <section class="hero-section"></section> 替代原 <div class="jumbotron">。
<p>容易忽略的是：v5 的栅格系统默认有 <code>gutter（间距），若内部用 .container，需确认是否要额外 mx-n3 抵消边距；另外 background-attachment: fixed 在移动端兼容性差，慎用。
