javascript - 如何让文本显示在此 Bootstrap 轮播中的叠加层上方？

Question

我目前正在做一个元素，我想使用这个全屏轮播 ( http://bootsnipp.com/snippets/ZkRvj )。我目前使用的是最新的 bootstrap 3 版本 (3.3.7)，但是这个特定的片段是为 3.2.0 构建的。

(如果把bootsnipp中的bootstrap版本改成最新的，也可以重现问题)

我遇到的问题是，用于使轮播中每张幻灯片的背景变暗的 DIV .overlay 也与文本和按钮重叠，这意味着文本和按钮也变暗了。我试过给 .hero 类(用于文本和按钮)和子元素更高的 z-index 但这并不能解决问题。我也试过降低覆盖 z-index 但这也不起作用。

这个问题在 bootstrap 3.2.0 中没有显示，但在 3.3.7 中有，我不知道如何解决这个问题。

谢谢

Answer 1

我不知道为什么 bootstrap 版本的变化会出现这个问题，尽管它显然会...

我通过 3 个步骤解决了您的问题:

1) 给.carousel-inner一个background-color: #000;。

2) 删除'.overlay' div。

3) 在您的 .slide-x 规则(设置背景图片的位置)中，添加 opacity: 0.4;。

基本上，这会使图像半透明，但不是您的主 Angular 。正如您可以通过图像看到幻灯片容器的(现在)黑色背景，您可以获得完全相同的效果，而没有 z-index 的心痛。