html - Bootstrap 容器不透明？

Question

我有一个全屏 Bootstrap 容器，它位于我添加的颜色叠加层前面。但似乎容器阻挡了覆盖层，即使它大部分是空的，为什么会这样？我需要它在我的容器后面，因为容器内的 img 需要在颜色之上。不过，html 的正文颜色正在出现。但是我需要将 html 的主体颜色和覆盖层分开，因为我正在慢慢淡出覆盖层以显示主体颜色......想知道这听起来是否令人困惑。 =x 提前致谢!

<div class="container-fluid">
    <div class="row row-xs-center">
        <div class="col-xs-12 text-xs-center">
            <img src="../img/cover_coral.png" id="myCover">
        </div>
    </div>
</div>
<div id="myOverlay"></div>

Answer 1

使用 Bootstrap 的 container-fluid 类将导致您的 div 标记跨越页面的宽度(应用了一些填充)。如果您想在其前面显示一个叠加层，最好的选择是使用 CSS 添加一个 z-index，比如 2000(任何大的数字都可以)。当您淡出时，只需设置叠加层的不透明度动画和/或更改 z-index，使其位于容器后面。