Question

我有这个Bootstrap轮播：

HTML：

<div id="carousel-example" class="carousel slide" data-ride="carousel">
  <div class="carousel-overlay"></div>

  <ol class="carousel-indicators">
    <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example" data-slide-to="1"></li>
    <li data-target="#carousel-example" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="item active">
      <a href="#"><img src="http://placekitten.com/1600/600" /></a>
      <div class="carousel-caption">
        <h3>Meow</h3>
        <p>Just Kitten Around</p>
      </div>
    </div>
    <div class="item">
      <a href="#"><img src="http://placekitten.com/1600/600" /></a>
      <div class="carousel-caption">
        <h3>Meow</h3>
        <p>Just Kitten Around</p>
      </div>
    </div>
    <div class="item">
      <a href="#"><img src="http://placekitten.com/1600/600" /></a>
      <div class="carousel-caption">
        <h3>Meow</h3>
        <p>Just Kitten Around</p>
      </div>
    </div>
  </div>

  <a class="left carousel-control" href="#carousel-example" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

CSS：

.carousel-overlay{
    background-color: black;
    width: 100%;
    opacity: 0.3;
    height: 100%;
    position: absolute;
    z-index: 15;
}

我希望标题和箭头按钮位于叠加层的顶部，就像旋转木马指示器一样。我尝试使用z-index，但它无效。

这是一个小提琴：http://jsfiddle.net/bM32G/39/

Answer 1

我在这个小提琴中用z-index将字幕和箭头按钮放在叠加层顶部：

http://jsfiddle.net/1xu2fpc8/

为简单起见，我使用了一些!important，但它似乎对我有用。

Answer 2

要更改您需要参考的轮播内容的颜色，在本例中为img。将以下代码添加到CSS中：

img{
 -webkit-filter: sepia(90%) hue-rotate(90deg);
}

删除或注释掉HTML中的以下行：

<div class="carousel-overlay"></div>

您还可以查看以下帖子：

Answer 3

由于z-index不适合您..

试试这个

.item a img {
  opacity: 0.6;
}

.carousel-control {
  opacity: 1;
}

.item .carousel-caption {
  opacity: 1;
}

FIDDLE

将旋转木马标题放在叠加层顶部

3 个答案: