Question

我正在Bootstrap中创建一个站点（3.3.5或最新版本），我正在使用轮播功能在其中一个页面上的背景图像之间淡入淡出。

首先，我使用这个CSS来调整Bootstrap Carousel以淡出和淡入，而不是滑动。

.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;

}

.carousel-fade .carousel-inner .active {
    opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

.carousel-fade .carousel-control {
    z-index: 2;
}

@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

我的问题是，我在转盘顶部放置了absolute。当旋转木马在图像之间切换时，它上面的东西也会逐渐消失。这显然不是我想要发生的。

我的HTML：

<div class="big-banner">
    <div class="carousel slide carousel-fade" id="carousel-home" data-ride="carousel1">
    </div> <!-- carousel -->
    <div class="container">
    </div> <!-- /.container -->
</div> <!-- /.big-banner -->

.container中的内容是我放在旋转木马上的东西。

任何人都知道解决方案吗？

Answer 1

将z-index:1000;添加到.overlay。 Updated fiddle。原因是b / c，即使你有absolute而不是旋转木马，它们都处于同一“级别”，z-index开始发挥作用。

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index:1000;
}

Answer 2

看看这是否适合您。此外，第4个<li data-target="#carousel-example-generic" data-slide-to="4"></li>丢失，所以我添加了它。

＆＃13;

.overlay {
  top: 0;
  font-size: 60px;
  position: absolute;
  text-align: center;
  color: #fff;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-control {
  z-index: 2;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
  .carousel-fade .carousel-inner > .item.next,
  .carousel-fade .carousel-inner > .item.active.right {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-inner > .item.prev,
  .carousel-fade .carousel-inner > .item.active.left {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .carousel-fade .carousel-inner > .item.next.left,
  .carousel-fade .carousel-inner > .item.prev.right,
  .carousel-fade .carousel-inner > .item.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@media (max-width: 767px) {
  .overlay {
    font-size: 30px;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="carousel-example-generic" class="carousel slide carousel-fade" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="4"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <h1 class="overlay">OVERLAY</h1>
    <div class="item active">
      <img src="http://placehold.it/2000x1000/216091/fff" />
    </div>
    <div class="item">
      <img src="http://placehold.it/2000x1000/53a7ea/fff" />
    </div>
    <div class="item">
      <img src="http://placehold.it/2000x1000/266080/fff" />
    </div>
    <div class="item">
      <img src="http://placehold.it/2000x1000/f00/fff" />
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>  <span class="sr-only">Previous</span> 
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>  <span class="sr-only">Next</span> 
  </a>
</div>

＆＃13;

Bootstrap Carousel问题 - 顶部闪烁的元素

2 个答案: