I have a header with a showcase with an image background and inside it an h1 title in white. Because when I apply a background with rgba to give it a transparency, the title is not affected and only the background image?
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);
}
The property
background-color: rgba()
only affects the color, not the descendants that the container has, since the alpha value is applied to the color itself, being part of its value.If what you want is to affect all descendants of the element, you can use the
opacity
.