应用背景固定：固定后，如何停止Bootstrap 4滑块图像从幻灯片上的移动位置停止？ （视差效果）

Question

我正在尝试向我的Bootstrap 4滑块添加视差滚动效果。但是，当滑块更改为下一张图像时，图像必须在更改后移动到位。如何阻止这种情况发生？

.customOverlayText {
  position: absolute;
  color: white;
  z-index: 2;
  left: 0;
  right: 0;
}

.carousel-inner .carousel-item {
  height: 500px;
  background-size: cover;
  background-position: center center;
  background-color: black;
  background-attachment: fixed;
}

.general {
  background-color: #f0f0f0;
  padding-left: 200px;
  padding-right: 200px;
  padding-top: 50px;
  padding-bottom: 50px;
}

@media only screen and (max-width: 1146px) {
  .general {
    padding-left: 50px;
    padding-right: 50px;
  }
}

<div class="carousel slide" data-pause="false" data-ride="carousel">
  <div class="customOverlayText d-flex h-100 align-items-center justify-content-center">
    <center>Overlay</center>
  </div>
  <div class="carousel-inner text-center">
    <div class="carousel-item active" style="background-image:url(http://coopertimewell.com/testing/images/slider/1.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/2.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/3.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/4.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/5.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/6.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/7.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/8.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/9.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/10.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/11.jpg);"></div>
    <div class="carousel-item" style="background-image:url(http://coopertimewell.com/testing/images/slider/12.jpg);"></div>
  </div>
</div>
<center>
  <div class="general" id="redGeneral">
    <h2>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam eget felis eget nunc lobortis mattis aliquam faucibus. Dolor sit amet consectetur adipiscing elit pellentesque habitant
      morbi tristique. Nisl pretium fusce id velit ut tortor pretium viverra. Velit dignissim sodales ut eu sem integer vitae justo eget. Scelerisque viverra mauris in aliquam sem. Nunc consequat interdum varius sit amet. Fames ac turpis egestas sed tempus
      urna. At volutpat diam ut venenatis tellus in metus. Sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Eget mauris pharetra et ultrices neque ornare. Id aliquet risus feugiat in ante metus dictum. Accumsan in nisl nisi
      scelerisque eu ultrices vitae auctor eu. Etiam dignissim diam quis enim lobortis scelerisque fermentum. Consectetur lorem donec massa sapien faucibus et. Mauris pharetra et ultrices neque ornare aenean. Amet nisl purus in mollis nunc sed id.</h2>
  </div>

还可以将文字叠加层添加到视差滚动效果上吗？

Answer 1

视差效果通常需要至少两层以不同的速度移动。我认为BS轮播不是设计用来做到这一点的。 此外，图片通常会添加

<img src="">

使用属性而不是使用背景图像来保持透视比。 如果您想继续尝试达到的效果，那么可以添加一些图像说明或示例吗？我认为使用BS框架（很多替代）会很困难。 https://getbootstrap.com/docs/4.0/components/carousel/ 关于您的问题，您能否为您的问题添加完整的代码示例？编辑它，然后使用（<>图标）。