如何让巨型颜色也覆盖导航栏

Question

我正在尝试获取一张图片(下面我用一种背景颜色进行了测试(来覆盖导航栏以及展示柜/巨型屏幕。 但是，我无法让它正确覆盖两者，并且导航栏保持不变 - 即使我创建了一个围绕导航栏和巨型机器人的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

Answer 1

问题是导航栏中的 bg-light 也覆盖了为导航栏分配颜色。