I have this following div and I would like to give the inner-card portion a background color but fade it, my experience with opacity is that it will also fade the contents inside of it. I was wondering if there's a way to bypass this effect.
<div class="container">
<div class="card">
<div class="inner-card">
<h5>Title</h5>
<p>Text</p>
<a href="">Link</a>
<div class="img-div">
<img src="../static/img/search.png" class="card-img" alt="">
</div>
</div>
</div>
.card{
display: flex;
flex-direction: column;
justify-content: end;
width: 350px;
height: 180px;
background: lightgreen;
border: 2px solid black;
margin-left: 8px;
margin-bottom: 8px;
}
.inner-card{
display: flex;
flex-direction: column;
justify-content: end;
background: orange;
}
The easiest way would be to assign your background a color with an alpha. As in:
.inner-card {
/* other properties */
background:rgba(255,165,0,0.5)
}
You'd need to convert your desired color into RGB (red=255, green=165, blue=0) and add an alpha (in this case, "50%").
The background-color property accepts an rgba color, where opacity is the fourth paremeter, so you can
background-color: rgba(255,165,0, opacity)
Where that's the rgb for orange, and you can replace opacity for whatever value you want.