如何让 jumbotron 颜色也覆盖导航栏答案

【问题标题】：How to get jumbotron colour to also cover navbar如何让 jumbotron 颜色也覆盖导航栏
【发布时间】：2018-05-25 15:13:00
【问题描述】：

我正在尝试获取一张图片（下面我使用单一背景颜色进行了测试）以覆盖导航栏以及展示柜/巨型显示器。但是，我无法让它正确覆盖两者，并且导航栏保持不变 - 即使我创建了一个围绕导航栏和 jumbotron 的 div 并为其分配背景图片。

此外，当我尝试一张图片时，它以一种相当随机的方式在展示柜中拉伸，我如何才能让它正确地覆盖元素？（图像尺寸为 1400x693 svg）。

<header class="nav-header">
  <nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="container">
      <a href="#"><span class="navbar-brand"><i>Logo</i></span></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse"
              aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav ml-auto">
          <li class="nav-item"><a class="nav-link" href="#">How it works</a></li>
        </ul><!--//nav-->

          <ul class="nav navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">My Profile</a>
            </li>
            <li class="nav-item">
              <a class="btn btn-outline-success" href="#">Log out</a>
            </li>
          </ul>

      </div>
    </div>
  </nav><!--//header-->
</header>

<section>
  <div class="showcase">
    <div class="container">
      <div class="jumbotron jumbotron-fluid showcase-content text-white">
        <div class="row">
          <div class="col-lg-6">
            <h2 class="display-4">Some title.</h2>
            <p class="lead">Some additional showcase text.</p>
            <p>
              <a class="btn btn-secondary text-white " href="#">Get Started -></a>
            </p>
          </div>
          <div class="col-lg-6">
            <image></image>
          </div>
        </div>
      </div>
    </div><!--//container-->
  </div>
</section><!--//promo-->

CSS

.showcase {
  background-color: red;
  background-size: cover;
}

.nav-header {
  background-color: transparent;
}

.showcase-content {
  background-color: transparent;
}

代码笔：

https://codepen.io/anon/pen/vjqvEE

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

问题在于导航栏中的 bg-light 也覆盖了将颜色分配给导航栏。

【讨论】：