1

Esta pregunta es basada desde una pregunta ya respondida por Alvaro Montoro pero con un nuevo problema.

Consto con dos ejemplos muy útil.

En este ejemplo se crea una capa semitransparente encima de la imagen, utilizando los elementos ::before o ::after.

#image {
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  position:relative;
}

#image::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  }
  
.detalle {
  color:#fff;
}
<div id="image">
  <div id="container">
    <div class="detalle">
      <h2>TITLE TITLE</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt neque harum a, cum natus fugit quidem, odio ea. Error ad a placeat omnis tempora nisi rerum, minima earum, sed dolor?</p>
    </div>
  </div>
</div>

El segundo ejemplo se utiliza los filtros CSS para cambiar el contraste/luminosidad de la imagen.

#image {
  background-color: rgba(0,0,0,0.8);
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  filter:brightness(0.4);
}
  
.detalle {
  color:#fff;
}
<div id="image">
  <div id="container">
    <div class="detalle">
      <h2>TITLE TITLE</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt neque harum a, cum natus fugit quidem, odio ea. Error ad a placeat omnis tempora nisi rerum, minima earum, sed dolor?</p>
    </div>
  </div>
</div>

Ahora el problema esta que el efecto aplica cambios al texto, el color blanco del texto pasa a ser un color gris.

Cómo aplicar los efectos del ejemplo solo a la imagen de fondo.

1
  • El filtro se aplica a todo el elemento, lo cual implica que también se va a aplicar a sus hijos por eso aparece tu texto en gris. Si quieres que el efecto sólo se aplique a la imagen lo ideal sería que tuvieras un div a la misma altura de container que muestre la imagen de fondo y a ese div le apliques el filtro, de esa manera el filtro se aplica a la imagen y lo que está dentro de detalle no se ve afectado. Commented el 21 oct. 2016 a las 22:28

1 respuesta 1

1

Bueno no vi la necesidad de utilizar el after o before , Prueba este código:

#image {
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  position:relative;  
  

}

#container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background:rgba(0,0,0,0.6);
}
   
.detalle {
  color:#fff;
}
<div id="image">
  <div id="container">
    <div class="detalle">
      <h2>TITLE TITLE</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt neque harum a, cum natus fugit quidem, odio ea. Error ad a placeat omnis tempora nisi rerum, minima earum, sed dolor?</p>
    </div>
  </div>
</div>

Para el segundo ejemplo seria:

#container {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;  
}

#image {
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;   
  filter:brightness(0.4);
}
   
.detalle {
  position: absolute;  
  color:#fff;
  top: 0;
}
<div id="container">
  <div id="image">
  </div>

   <div class="detalle">
     <h2>TITLE TITLE</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt neque harum a, cum natus fugit quidem, odio ea. Error ad a placeat omnis tempora nisi rerum, minima earum, sed dolor?</p>
   </div>
</div>

2
  • perfecto, y en el asunto del filtro filter que solución se podría aplicar?
    – Otto
    Commented el 21 oct. 2016 a las 22:22
  • @J.Doe listo ya actualize la respuesta Commented el 21 oct. 2016 a las 22:43

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.