Bootstrap 5 已彻底移除 .jumbotron 类，CSS 中不存在该样式；背景图不显示主因是容器无高度和未设置 background-size: cover；视频背景须用 <video> 元素而非 background-video；文字可读性靠同级遮罩层（如 bg-dark opacity-50）保障。
为什么加了 class="jumbotron" 却没背景
不是路径错了，也不是 CDN 没加载，是 Bootstrap 5 已经物理删除了 .jumbotron 类——bootstrap.min.css 里根本找不到它，DevTools 的 Computed 样式中也查不到任何规则匹配。你看到的 class 属性只是 HTML 上挂着，CSS 层面已失效。
如果你用的是 SCSS 源码构建，_jumbotron.scss 文件在 v5+ 版本中已被移除，连 deprecated 提示都没有，直接下架。
- 检查浏览器 Network 面板：如果图片请求返回 404 或 MIME 错误（比如服务器没配
.jpg类型），那才是路径或服务问题；但多数情况是请求成功、渲染空白——这就指向类名失效 - 别在旧文档里搜 “jumbotron”，官方文档已不收录该组件，搜到的都是 v4 或更早内容
- 升级后保留
.jumbotron类名，只会影响可维护性，不会带来任何样式效果
background-image 写对了还是不显示？两个硬性条件缺一不可
即使你手动给容器加了 style="background-image: url(./img/hero.jpg)"，图仍不显示，大概率卡在以下两点：
- 容器没有高度：
<div>默认按内容撑高，文字少时高度为 0，背景图自然无处渲染；必须显式设min-height: 100vh或height: 100vh - 没声明缩放行为：浏览器默认用原尺寸平铺，必须加
background-size: cover才能等比填满，再配background-position: center center防偏移
推荐写法（内联 style 更可控）：
<div class="container-fluid min-vh-100" style="background-image: url(./img/hero.jpg); background-size: cover; background-position: center center; background-repeat: no-repeat;">
<div class="container py-5 text-white">
<h1>欢迎来到首页</h1>
</div>
</div>
用视频当背景时，background-video 是无效的
CSS 规范里根本不存在 background-video 这个属性，浏览器会静默忽略。所有试图写成 background: url(video.mp4) 的做法都无效。
正确方式是用 <video> 元素承载，并配合绝对定位与关键属性：
- 父容器加
position-relative vh-100，并确保min-height: 100vh（防 iOS 视口缩放塌陷） -
<video>加position-absolute top-0 start-0 w-100 h-100和style="object-fit: cover;" - 必须带
muted autoplay loop playsinline—— 缺一不可，否则 iOS 和 Chrome 会拒绝播放 - 在
<video>内第一行放<img src="fallback.jpg" alt="Hero background">，作为视频不可用时的降级
文字看不清？别只调颜色，加遮罩才是稳定解法
背景图一上，白色文字在亮区就消失，黑色文字在暗区就糊成一片。靠 JS 判断明暗再换色成本高、响应慢，且移动端适配复杂。
更稳妥的做法是加一层半透明遮罩：
- 遮罩必须是独立
<div>，和<video>或背景<div>同级，都在position-relative容器内 - 层级顺序：背景（z-index: 1）→ 遮罩（z-index: 2）→ 文字层（z-index: 3）
- 直接用 Bootstrap 工具类：
bg-dark opacity-50，不要用opacity: 0.5直接作用于整个容器，否则文字也会变透明
遮罩本身不参与交互，不影响 playsinline 或触摸事件，是最轻量、最兼容的对比度保障手段。
