0

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;
}
Keith Coye
  • 75
  • 1
  • 7

2 Answers2

1

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

Damian Fraustro
  • 51
  • 8
1

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

sorold
  • 475
  • 7
  • 17