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

时间：2016-06-25 22:45:31

标签： jquery html css3 twitter-bootstrap-3 carousel

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

演示：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>

1 个答案:

答案 0 :(得分：1)

如何在滑动转盘中保持标题背景静止

不幸的是，我们不能在幻灯片之外放置具有静态背景的div并将z-index属性应用于它。由于the different stacking contexts：

，我们无法在标题和幻灯片之间放置此类背景
  

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

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

  

现在，在这里，您可以看到，您可以执行所有操作，并保持在同一个位置。

Illustration by John Tenniel

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>

相关问题
最新问题