Bootstrap 不提供原生 parallax 效果，所有实现均需手动结合 CSS（如 background-attachment: fixed）或 JavaScript（如 Intersection Observer + transform）完成，第三方库如 jarallax 需手动初始化且注意兼容性。
Bootstrap 本身不提供原生 parallax 效果
Bootstrap（包括 v5 和 v4）没有内置 parallax 或视差滚动组件。你看到的“Bootstrap parallax”效果，几乎全是靠手动叠加 CSS + JavaScript 实现的，框架只负责布局和响应式，不处理滚动动画逻辑。
直接在 div 上加 data-bs-parallax 或类似属性是无效的——Bootstrap 没注册这个行为。别浪费时间找文档里不存在的 API。
用 background-attachment: fixed 实现基础视差（最简方案）
这是纯 CSS 方案，兼容性好、零 JS、适合静态背景图。核心是设置容器高度 + 固定背景 + 防止缩放失真：
-
background-image必须设在有明确高度（如min-height: 100vh）的块级元素上 - 必须写
background-attachment: fixed，否则只是普通背景 - 加上
background-size: cover和background-position: center避免拉伸或偏移 - 注意：Safari 对
fixed在 transform 容器中支持差，避免父级有transform或will-change
<div class="parallax-section" style="
min-height: 100vh;
background-image: url('bg.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center;
"></div>用 Intersection Observer + translateY 模拟真实视差（推荐进阶）
想让背景图滚动速度慢于内容（真正视差），得用 JS 计算滚动比例。硬写 window.onscroll 性能差，应优先用 IntersectionObserver 监听元素进入视口，再配合 requestAnimationFrame 更新位移：
- 监听目标元素的
boundingClientRect.top和window.innerHeight得到滚动进度 - 用
transform: translateY()移动背景图层（比修改top更高效） - 把背景图单独抽成伪元素（
::before）或子div，避免干扰内容流 - 移动端需额外处理 touchmove（iOS Safari 默认禁用
fixed背景滚动）
示例关键逻辑：
const parallaxEl = document.querySelector('.js-parallax');
const bgLayer = parallaxEl.querySelector('.parallax-bg');
<p>const updateParallax = () => {
const scrollTop = window.scrollY;
const speed = 0.3; // 视差强度，0～1 之间
bgLayer.style.transform = <code>translateY(${scrollTop * speed}px)</code>;
};</p><p>window.addEventListener('scroll', () => requestAnimationFrame(updateParallax));第三方库选型要注意兼容性和体积
如果不想手写，jarallax 或 scrollama 是较轻量的选择；但注意：bootstrap-parallax 这类名字带 Bootstrap 的库，多数只是样式适配，不是官方扩展。
-
jarallax支持图片/视频/HTML 内容，但 v12+ 已放弃 IE，且默认启用will-change: transform，可能触发 iOS 渲染 bug - 用
npm install jarallax后，仍需手动初始化：jarallax(document.querySelectorAll('.jarallax')) - 别引入
locomotive-scroll只为做视差——它主打平滑滚动，开销大，和简单视差需求不匹配
真正容易被忽略的是：视差效果在高 DPR 屏幕（如 MacBook Retina、iPhone）下易出现模糊，务必给背景图添加 image-rendering: -webkit-optimize-contrast 并确保图片分辨率足够。
