Bootstrap轮播组件视差效果在Firefox浏览器中无法正常运行

我来帮你解决Firefox里Bootstrap轮播视差效果失效的问题！

先给你捋清楚核心原因：Firefox对background-attachment: fixed的处理逻辑和其他浏览器不一样——当元素处于带有transform属性的容器内（Bootstrap轮播的.carousel-item默认会有transform动画），fixed背景就会失效，这是Firefox的已知行为。

下面给你两个可行的修复方案，根据你的需求选就行：

这个方案会把轮播默认的滑动动画换成淡入淡出，简单直接，适合不纠结滑动效果的场景：

/* 重置轮播项的动画属性，去掉transform */
.carousel-item {
  transition: opacity 1s ease-in-out !important;
  transform: none !important;
}
/* 控制轮播项的透明度切换 */
.carousel-item.active,
.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
  opacity: 1;
}
.carousel-item-next,
.carousel-item-prev,
.carousel-item.active.carousel-item-left,
.carousel-item.active.carousel-item-right {
  opacity: 0;
}

如果想保留轮播的滑动效果，就把视差背景元素从.carousel-item里抽出来，放在轮播容器外，用JS同步轮播切换来控制背景显示：

第一步：调整HTML结构 #

<!--Carousel Wrapper-->
<div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
  <!-- 新增独立的视差背景容器 -->
  <div class="carousel-parallax-bg">
    <div class="parallax-slide active" style="background-image: url('你的第一张背景图地址')"></div>
    <div class="parallax-slide" style="background-image: url('你的第二张背景图地址')"></div>
    <!-- 对应轮播数量添加更多背景项 -->
  </div>
  <!--Indicators-->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-2" data-slide-to="1"></li>
    <!-- 其他指示器 -->
  </ol>
  <!--Slides 这里只放幻灯片内容，去掉背景图-->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="container">
        <h1>第一张幻灯片的内容</h1>
      </div>
    </div>
    <div class="carousel-item">
      <div class="container">
        <h1>第二张幻灯片的内容</h1>
      </div>
    </div>
    <!-- 其他幻灯片 -->
  </div>
  <!--Controls-->
  <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

第二步：添加CSS样式 #

.carousel-example-2 {
  position: relative;
  overflow: hidden;
}
/* 视差背景容器占满轮播，层级置于内容下方 */
.carousel-parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
/* 单个视差背景项的样式 */
.parallax-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
/* 激活的背景项显示 */
.parallax-slide.active {
  opacity: 1;
}
/* 确保轮播内容在背景上方 */
.carousel-inner {
  position: relative;
  z-index: 1;
}

第三步：用JS同步轮播切换 #

// 监听轮播切换事件，同步切换对应视差背景
$('#carousel-example-2').on('slide.bs.carousel', function (e) {
  var targetIndex = $(e.relatedTarget).index();
  $('.parallax-slide').removeClass('active');
  $('.parallax-slide').eq(targetIndex).addClass('active');
});

修改完成后刷新Firefox，就能看到和其他浏览器一致的视差效果了。如果还有问题，可以检查下是否有其他CSS规则覆盖了background-attachment属性，或者给视差元素加个will-change: background-position触发硬件加速试试。

内容的提问来源于stack exchange，提问作者Rick J