如何使文本显示在该引导轮播中的叠加层上方？

Question

我目前正在从事一个项目，并且希望使用此全屏轮播（ http://bootsnipp.com/snippets/ZkRvj ）。 我目前正在使用最新的bootstrap 3版本（3.3.7），但是此特定代码段是为3.2.0构建的。

（如果将bootsnipp中的引导程序版本更改为最新版本，则也可以复制该问题）

我遇到的问题是，用于使轮播中每张幻灯片的背景变暗的DIV .overlay也与文本和按钮重叠，这意味着文本和按钮也越来越暗。 我尝试给.hero类（用于文本和按钮）和子元素赋予更高的z-index，但这不能解决问题。 我也曾尝试降低叠加层的Z-index，但这也行不通。

此问题在bootstrap 3.2.0中未显示，但在3.3.7中显示，并且我不知道如何解决此问题。

谢谢

Answer 1

我不知道为什么引导程序版本的更改应该会引起此问题，尽管它显然可以...

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

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

2）删除“ .overlay” div。

3）在.slide-x规则中（设置背景图片），添加opacity: 0.4; 。

基本上，这会使图像变得不透明，但对您的英雄却不透明。 您可以从图像中看到幻灯片容器的（现在）黑色背景，您可以获得完全相同的效果，而没有z-index心痛。