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.
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.