在全屏 Bootstrap Carousel 中浮动白色背景

Question

我想保持白色透明背景颜色静止而不滑动。我希望它像箭头一样留在同一个地方。我只想滑动文本和背景图像。箭头和透明背景保持在原处。我怎样才能做到这一点？

演示：https://jsfiddle.net/55gfw2jg

$('.carousel').carousel({
  interval: 5000 //changes the speed
})

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

html,
body {
  height: 100%;
}
.carousel,
.item,
.active {
  height: 100%;
}
.carousel-inner {
  height: 100%;
}
.carousel-caption {
  padding: 15px;
  bottom: 0%;
  top: auto;
  height: 300px;
  background-color: rgba(250, 250, 250, 0.8);
  overflow-x: hidden;
  overflow-y: scroll;
  color: #000;
}
/* Background images are set within the HTML using inline CSS, not here */

.fill {
  width: 100%;
  height: 100%;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
div {
  height: 100%;
}

<div>
  <div>
    <header id="myCarousel" class="carousel slide">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for Slides -->
      <div class="carousel-inner">
        <div class="item active">
          <!-- Set the first background image using inline CSS below. -->
          <div class="fill" style="background-image:url('https://scontent.fdel1-2.fna.fbcdn.net/v/t1.0-0/p206x206/13413729_1332273040133438_4923141636508009165_n.jpg?oh=b2d551fe047e7ab1e576478d2479a73c&oe=57FC9B8E');"></div>
          <div class="carousel-caption">
            <h2>Caption 1</h2>
            <p>
              This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph.
              This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is another sample text and is
              awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is
              another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text
              and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This
              is another sample text and is awesome.
            </p>
          </div>
        </div>
        <div class="item">
          <!-- Set the second background image using inline CSS below. -->
          <div class="fill" style="background-image:url('https://scontent.fdel1-2.fna.fbcdn.net/v/t1.0-0/p206x206/13418784_1336348086392600_1013125626105218969_n.jpg?oh=b64502fe8d0a189860c6a9a033f59da6&oe=5801E11D');"></div>
          <div class="carousel-caption">
            <h2>Caption 2</h2>
            <p>
              This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and
              is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This
              is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample
              text and is awesome. This is another sample text and is awesome.
            </p>
          </div>
        </div>
        <div class="item">
          <!-- Set the third background image using inline CSS below. -->
          <div class="fill" style="background-image:url('https://scontent.fdel1-2.fna.fbcdn.net/v/t1.0-0/p206x206/13466497_1336348296392579_2409144383226693505_n.jpg?oh=7db5576e31809f18bffbd990811592b1&oe=57FA39BD');"></div>
          <div class="carousel-caption">
            <h2>Caption 3</h2>
            <p>
              This is the third paragraph and it is beyond awesome. This is the third paragraph and it is beyond awesome. This is the third paragraph and it is beyond awesome. This is the third paragraph and it is beyond awesome. This is the third paragraph and it
              is beyond awesome. This is the third paragraph and it is beyond awesome. This is the third paragraph and it is beyond awesome.
            </p>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
      </a>

    </header>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

如何在滑动轮播时保持字幕背景静止

很遗憾，我们不能将具有静态背景的 div 放在幻灯片之外并对其应用 z-index 属性。由于the different stacking contexts，我们不能在标题和幻灯片之间放置这样的背景：

每个堆叠上下文完全独立于其兄弟元素：处理堆叠时只考虑后代元素。

但是我们可以把它作为一个单独的元素放在幻灯片中，让它向相反的方向运行。

现在，你看，你需要竭尽全力才能保持在同一个地方。

translate3d函数的参数公式为：

((100% - left) + 2 x left) / (100% - left)

请查看结果：https://jsfiddle.net/glebkema/eh3hqzeL/

$('.carousel').carousel({
  interval: 5000 //changes the speed
})

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

html,
body,
div,
.carousel,
.carousel-inner,
.item,
.active {
  height: 100%;
}

/* Background images are set within the HTML using inline CSS, not here */
.fill {
  width: 100%;
  height: 100%;
  background-position: center;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

.carousel-caption,
.static-bg {
  bottom: 0%;
  top: auto;
  height: 300px;
}
.carousel-caption {
  padding: 15px;
  overflow-x: hidden;
  overflow-y: scroll;
  color: #000;
}
.static-bg {
  background-color: rgba(250, 250, 250, 0.8);
  position: fixed;
}

/* Run in the opposite direction */
.carousel-inner > .item > .static-bg {
  -webkit-transition: -webkit-transform .6s ease-in-out;
       -o-transition:      -o-transform .6s ease-in-out;
          transition:         transform .6s ease-in-out;
          
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
@media (max-width: 767px) {
  .carousel-inner > .item.next > .static-bg,
  .carousel-inner > .item.active.right > .static-bg {
    left: 15%;
    -webkit-transform: translate3d(-142.85714285%, 0, 0);
            transform: translate3d(-142.85714285%, 0, 0);
  }
  .carousel-inner > .item.prev > .static-bg,
  .carousel-inner > .item.active.left > .static-bg {
    right: 15%;
    -webkit-transform: translate3d(142.85714285%, 0, 0);
            transform: translate3d(142.85714285%, 0, 0);
  }
  .carousel-inner > .item.next.left > .static-bg,
  .carousel-inner > .item.prev.right > .static-bg,
  .carousel-inner > .item.active > .static-bg {
    left: 15%;
    right: 15%;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@media (min-width: 768px) {
  .carousel-inner > .item.next > .static-bg,
  .carousel-inner > .item.active.right > .static-bg {
    left: 20%;
    -webkit-transform: translate3d(-166.66666667%, 0, 0);
            transform: translate3d(-166.66666667%, 0, 0);
  }
  .carousel-inner > .item.prev > .static-bg,
  .carousel-inner > .item.active.left > .static-bg {
    right: 20%;
    -webkit-transform: translate3d(166.66666667%, 0, 0);
            transform: translate3d(166.66666667%, 0, 0);
  }
  .carousel-inner > .item.next.left > .static-bg,
  .carousel-inner > .item.prev.right > .static-bg,
  .carousel-inner > .item.active > .static-bg {
    left: 20%;
    right: 20%;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

<div>
  <div>
    <header id="myCarousel" class="carousel slide">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for Slides -->
      <div class="carousel-inner">
        <div class="item active">
          <!-- Set the first background image using inline CSS below. -->
          <div class="fill" style="background-image:url('https://scontent.fdel1-2.fna.fbcdn.net/v/t1.0-0/p206x206/13413729_1332273040133438_4923141636508009165_n.jpg?oh=b2d551fe047e7ab1e576478d2479a73c&oe=57FC9B8E');"></div>
          <div class="carousel-caption static-bg"></div> <!-- Static background -->
          <div class="carousel-caption">
            <h2>Caption 1</h2>
            <p>
              This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph.
              This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is a sample text and it is a small paragraph. This is another sample text and is
              awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is
              another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text
              and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This
              is another sample text and is awesome.
            </p>
          </div>
        </div>
        <div class="item">
          <!-- Set the second background image using inline CSS below. -->
          <div class="fill" style="background-image:url('https://scontent.fdel1-2.fna.fbcdn.net/v/t1.0-0/p206x206/13418784_1336348086392600_1013125626105218969_n.jpg?oh=b64502fe8d0a189860c6a9a033f59da6&oe=5801E11D');"></div>
          <div class="carousel-caption static-bg"></div> <!-- Static background -->
          <div class="carousel-caption">
            <h2>Caption 2</h2>
            <p>
              This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and
              is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This
              is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample text and is awesome. This is another sample
              text and is awesome. This is another sample text and is awesome.
            </p>
          </div>
        </div>
        <div class="item">
          <!-- Set the third background image using inline CSS below. -->
          <div class="fill" style="background-image:url('https://scontent.fdel1-2.fna.fbcdn.net/v/t1.0-0/p206x206/13466497_1336348296392579_2409144383226693505_n.jpg?oh=7db5576e31809f18bffbd990811592b1&oe=57FA39BD');"></div>
          <div class="carousel-caption static-bg"></div> <!-- Static background -->
          <div class="carousel-caption">
            <h2>Caption 3</h2>
            <p>
              This is the third paragraph and it is beyond awesome. This is the third paragraph and it is beyond awesome. This is the third paragraph and it is beyond awesome. This is the third paragraph and it is beyond awesome. This is the third paragraph and it
              is beyond awesome. This is the third paragraph and it is beyond awesome. This is the third paragraph and it is beyond awesome.
            </p>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
      </a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
      </a>

    </header>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>