Front-end Shorts: CSS3 Opacity - Background Only
Hi everyone! It’s time for a new post.
What we do (I mean front-end web developers) isn’t all that unique. Often we face the problem that seems easy to solve. However, sometimes we spend hours on finding the solution.
In this case, I wanted to change the opacity of the app teaser background color and don’t change the opacity of links. I have tried some silly approaches that seemed logical to me, and they all have failed.
In the end, I have found the right way to do that, and I’m going to share it with you.
My solution is to create three <div>
elements.
One will contain the other two.
The first one is with the transparent background and the second one with the content.
Then I make the container <div>
position relative. For the <div>
with the transparent background I set z-index with the negative number.
Finally, I adjust the position of the content to fit over the transparent background.
Voila, there is no issue with absolute positioning.
<!-- index.html -->
<div class="container">
<div class="opacity"></div>
<div class="content">Hello, World!</div>
</div>
/* index.css */
.container {
position: relative;
width: 100px;
height: 100px;
margin: 0 auto;
}
.content {
position: absolute;
width: 100px;
height: 100px;
z-index: 1;
top: 40%;
left: 5%;
}
.opacity {
position: absolute;
width: 100px;
height: 100px;
z-index: -1;
background-color: green;
opacity: 0.2;
}
The <div>
element with the container
class should have relative positioning, and absolute for others, so it’s possible to move and to adjust them inside the parent <div>
.
Please keep in mind, that <div>
with transparent background and the one with the content should not contain each other. These <div>
's should be siblings and be children of the container <div>
element.
We apply the opacity to a separate <div>
and position the text on top of it.
Thank you for reading. Hope these tips help you and your team balance the details with the big picture.