在叠加层顶部添加轮播标题答案

【问题标题】：Bring carousel caption on top of the overlay在叠加层顶部添加轮播标题
【发布时间】：2016-11-13 03:56:06
【问题描述】：

我有这个 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/

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

我把标题和箭头按钮放在这个 Fiddle 的 z-index 覆盖层的顶部：

http://jsfiddle.net/1xu2fpc8/

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

【讨论】：

就像我说的 z-index 不适合我。什么都没有发生
你看我链接的 jsfiddle 了吗？我不知道我是否误解了你，但在 jsfiddle 中，你想要的覆盖层之上的所有元素都在覆盖层之上。
是的，我看过了，这就是我需要的。但这对我不起作用:(
嗯好吧。您是否可以将添加到滑块的 CSS 放入您的 JSFiddle 中，这样我就可以看到还有哪些样式可能会干扰 z-index？

【解决方案2】：

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

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

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

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

您还可以查看以下帖子：

【讨论】：

如果我删除 z-index，覆盖层根本不可见。
@Nivedita 我已经更新了我的答案，请看一下，让我知道这是否适合你。

【解决方案3】：

因为z-index 不适合你..

试试这个

.item a img {
  opacity: 0.6;
}

.carousel-control {
  opacity: 1;
}

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

FIDDLE

【讨论】：