1

Tengo un header con un showcase con fondo una imagen y adentro del mismo un título h1 en color blanco. Porque cuando aplico un background con rgba para darle una transparencia el título no se ve afecto y solo la imagen de fondo?

HTML

 <!-- Header: Showcase -->
    <header id="showcase">
        <div class="showcase-content">
            <h1 class="l-heading">
                The Sky Is The Limit
            </h1>
            <p class="lead">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda laborum veritatis molestias repudiandae dicta vitae.
            </p>
            <a href="#what" class="btn">Read More</a>
        </div>
    </header>

CSS

    /* Showcase */
    #showcase {
      background: #333 url('../img/showcase.jpg') no-repeat center center/cover;
      height: 100vh;
      color: #fff;
    }
    
    #showcase .showcase-content {
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      align-items: center;
      height: 100%;
      padding: 0 2rem;
      /* Overlay */
      position: absolute;
      top: 60px;
      left: 0;
      background-color: rgba(0,0,0,0.4);
    }

1 respuesta 1

1

La propiedad background-color: rgba() afecta solamente al color, no a los descendientes que el contenedor tenga, ya que el valor del alfa se aplica sobre el color en sí, siendo parte de su valor.

Si lo que que quieres es afectar a todos los descendientes del elemento puedes usar la propiedad opacity.

.titulo1 {
  background-color: rgba(0, 0, 0, 0.5);
  color: red;
}

.titulo2 {
  background-color: rgb(0, 0, 0);
  color: red;
  opacity: 0.5;
}
<div class="titulo1">
  <h2>Título 1</h2>
</div>

<div class="titulo2">
  <h2>Título 2</h2>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.