Bootstrap 5 移除 Jumbotron 且 background-attachment: fixed 易失效，主因是层叠上下文与局部滚动容器；推荐用 position: sticky + transform 模拟视差，或轻量 JS 实现精准滚动匹配。
Bootstrap 5 已经移除了 Jumbotron 组件，原生不支持背景视差；所谓“Jumbotron 视差”必须手动实现，且不能依赖 Bootstrap 的 CSS 类自动完成。
为什么 background-attachment: fixed 在现代 Bootstrap 5 里大概率失效
Bootstrap 5 默认启用 scroll-behavior: smooth 和容器级 overflow-anchor: auto，加上多数布局使用 flex 或 grid 容器，会触发新的层叠上下文或建立局部滚动容器——导致 background-attachment: fixed 失效（背景随容器滚动，而非视口）。
- 检查父容器是否设置了
transform、will-change、perspective或filter：任意一个都会创建新层叠上下文，禁用fixed背景 - 确认
<body>和<html>没有overflow: hidden或height: 100%类似限制 - 移动端 Safari 完全忽略
background-attachment: fixed，这是硬性限制，无法绕过
用 position: sticky + transform: translateY() 模拟轻量视差
这是目前兼容性最好、无需 JS、且在 Bootstrap 5 布局中稳定工作的方案。核心是让背景图层“粘住”视口，再用 transform 反向偏移制造滚动错觉。
.parallax-jumbotron {
position: relative;
height: 100vh;
overflow: hidden;
}
.parallax-jumbotron::before {
content: "";
position: sticky;
top: 0;
width: 100%;
height: 100vh;
background-image: url('hero-bg.jpg');
background-size: cover;
background-position: center;
transform: translateY(calc(-20vh)); /* 滚动时缓慢上移 */
z-index: -1;
}
- 把该类加到你的
<div class="container">外层，不要套在.row或.col内部 -
transform: translateY(calc(-20vh))中的-20vh是视差强度：值越小（如-5vh）越轻微，越负（如-40vh）越强烈，但超过-50vh易露白边 - 务必保留
z-index: -1，否则内容会被遮挡
需要真实视差？必须用 IntersectionObserver + requestAnimationFrame
当设计要求背景移动速度严格匹配滚动距离（比如 0.3 倍速），CSS 方案不够精确，就得上轻量 JS。注意：这不是“加个库”，而是 20 行内可完成的逻辑。
立即学习“前端免费学习笔记（深入）”；
const parallaxEl = document.querySelector('.js-parallax-bg');
if (parallaxEl) {
const update = () => {
const scrollY = window.scrollY;
parallaxEl.style.transform = `translateY(${scrollY * 0.3}px)`;
};
window.addEventListener('scroll', update, { passive: true });
update(); // 初始化位置
}
- 给目标元素加
class="js-parallax-bg"，并设position: absolute+top: 0+width: 100%+height: 100% -
{ passive: true }必须写，否则 iOS Safari 会报错并禁用滚动 - 不要监听
resize：视差只响应滚动，窗口缩放不影响背景位移逻辑
真正难的不是写几行 CSS 或 JS，而是判断哪个容器在截断 fixed 背景——经常是某个没命名的 <div class="d-flex"> 或 min-height: 100vh 的 wrapper 在作祟。先用浏览器 DevTools 逐层关闭 transform 和 overflow，比查文档更快。
