Tengo un header con un showcase con fondo una imagen y adentro del mismo un título h1 en color blanco. Porque cuando aplico un background con rgba para darle una transparencia el título no se ve afecto y solo la imagen de fondo?
HTML
<!-- Header: Showcase -->
<header id="showcase">
<div class="showcase-content">
<h1 class="l-heading">
The Sky Is The Limit
</h1>
<p class="lead">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda laborum veritatis molestias repudiandae dicta vitae.
</p>
<a href="#what" class="btn">Read More</a>
</div>
</header>
CSS
/* Showcase */
#showcase {
background: #333 url('../img/showcase.jpg') no-repeat center center/cover;
height: 100vh;
color: #fff;
}
#showcase .showcase-content {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
height: 100%;
padding: 0 2rem;
/* Overlay */
position: absolute;
top: 60px;
left: 0;
background-color: rgba(0,0,0,0.4);
}