用 background-attachment: fixed 实现视差需设 min-height、background-size: cover 并避免父容器 transform；safari 兼容性差，ios 旧版本需 js 模拟，且须节流防卡顿。
用 background-attachment: fixed 实现基础视差，但要注意 safari 兼容性
bootstrap 本身不提供视差滚动组件，得靠 css 原生实现。最直接的方式是给容器加 background-attachment: fixed，配合 background-image 和合适的尺寸设置。
常见错误是只设了 fixed 却没处理容器高度或背景尺寸，导致背景图被裁切、拉伸或根本不可见。
- 容器必须有明确高度（比如
min-height: 100vh），不能依赖内容撑开 - 务必加上
background-size: cover或contain，否则默认平铺会破坏效果 - Safari（尤其 iOS）对
fixed背景支持不稳定，滚动时可能卡顿或退化为普通滚动——这是最常被忽略的坑 - 如果容器内有子元素设置了
transform（比如 Bootstrap 的.carousel或某些动画类），会触发新的层叠上下文，导致fixed失效
在 Bootstrap 5 中用 bg-* 类配合自定义 CSS 才可靠
Bootstrap 的 bg-* 工具类（如 bg-dark）只控制颜色，不处理背景图或 background-attachment。必须自己写样式，并用 class 覆盖或新增。
推荐做法：定义一个新 class，比如 bg-parallax，在 <div> 上使用，避免污染全局或覆盖 Bootstrap 默认行为。<pre class="brush:php;toolbar:false;">.bg-parallax {
background-image: url('hero.jpg');
background-attachment: fixed;
background-position: center center;
background-size: cover;
min-height: 100vh;
}</pre>
<ul>
<li>别把 <code>background-attachment: fixed 直接写在 .bg-* 类上——它会被 Bootstrap 的 CSS 重置规则覆盖
container 或 container-fluid 包裹，确保它们不带 overflow: hidden，否则会剪掉固定背景background-attachment: fixed 效果弱甚至关闭，可用媒体查询降级为 scroll
遇到“背景不动”或“滚动撕裂”，先检查父容器是否启用了 transform 或 will-change
这是实际开发中最隐蔽的问题：哪怕你没主动写 transform，Bootstrap 某些组件（如 offcanvas、dropdown 动画、carousel 的 transition）内部用了 transform: translateZ(0) 或 will-change: transform，就会创建堆叠上下文，让 fixed 背景相对该容器定位，而不是视口。
- 打开浏览器 DevTools，选中背景容器 → 查看 Computed 样式 → 检查
transform和will-change是否被继承或强制应用 - 临时移除附近所有
data-bs-*属性（比如data-bs-toggle="offcanvas"），确认是否是组件干扰 - 解决办法不是硬改 Bootstrap 源码，而是把视差容器提级到
直接子元素，或用position: absolute+z-index隔离渲染层
真要兼容 iOS Safari？放弃 fixed，改用 JS 滚动监听模拟
原生 background-attachment: fixed 在 iOS Safari 上从 15.4 开始才基本稳定，老版本和部分 iPadOS 仍会回退为 scroll。如果项目必须支持这些设备，就得用 JS 控制背景位移。
核心思路：监听 scroll 事件，按比例修改 background-position-y，制造视差感。不需要重型库，几十行就能搞定。
const parallaxEl = document.querySelector('.js-parallax');
if (parallaxEl) {
window.addEventListener('scroll', () => {
const yPos = -window.scrollY / 1.5;
parallaxEl.style.backgroundPositionY = `${yPos}px`;
});
}
- 除数
1.5控制视差强度，越大越慢，越小越明显；调太大会导致背景提前消失 - 务必加节流（如
requestAnimationFrame），否则滚动卡顿 - 这个方案绕过了浏览器渲染限制，但增加了 JS 执行负担——复杂页面里，优先测性能再决定是否启用
视差滚动看着简单，实际落地时，Safari 兼容性、父容器 transform 干扰、JS 性能权衡这三点，比写几行 CSS 更耗时间。
