Tengo este siguiente div y me gustaría darle un color de fondo a la parte interna de la tarjeta, pero desvanecerlo, mi experiencia con la opacidad es que también desvanecerá el contenido dentro de ella. Me preguntaba si hay una manera de evitar este efecto.
<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; }La forma más fácil sería asignarle a su fondo un color con un alfa. Como en:
.inner-card { /* other properties */ background:rgba(255,165,0,0.5) }Deberá convertir su color deseado en RGB (rojo = 255, verde = 165, azul = 0) y agregar un alfa (en este caso, "50%").
La propiedad background-color acepta un color rgba, donde la opacidad es el cuarto parámetro, por lo que puede
background-color: rgba(255,165,0, opacity)Donde ese es el rgb para naranja, y puede reemplazar la opacidad por el valor que desee.