Is there a way to use opacity on a div background/color without fading the contents inside of it?-CodePudding

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 >
        <div >
            <div >
                <h5>Title</h5>
                <p>Text</p>
                <a href="">Link</a>
                <div >
                    <img src="../static/img/search.png"  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;
}

CodePudding user response：

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%").

CodePudding user response：

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.

More here: https://www.w3schools.com/cssref/func_rgba.asp