¿Cómo aplicar una capa oscura transparente a una imagen de fondo?

publicado por: Anonymous

Estoy tratando de aplicar un color negro transparente a una imagen de fondo para evitar colores fuertes o muy llamativos.

Sin necesidad de tener que editar la imagen con algún programa en especial.

He intentado aplicar este estilo:

background-color: rgba(0,0,0,0.8);

Pero no he tenido éxito.

Cómo logro que la imagen de fondo se aplique un color negro transparente, como una capa.

_x000D_

_x000D_

#image {_x000D_
  background-color: rgba(0,0,0,0.8);_x000D_
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);_x000D_
  height: 500px;_x000D_
  max-width: 100%;_x000D_
}

_x000D_

<div id="image"></div>

_x000D_

_x000D_

_x000D_

solución

Una posibilidad sería usar los filtros CSS para cambiar el contraste/luminosidad de la imagen. Si pones una luminosidad entre 0 y 1 la imagen se verá más oscura. Algo como este ejemplo:

_x000D_

_x000D_

#image {_x000D_
  background-color: rgba(0,0,0,0.8);_x000D_
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);_x000D_
  height: 500px;_x000D_
  max-width: 100%;_x000D_
  filter:brightness(0.4);_x000D_
}

_x000D_

<div id="image"></div>

_x000D_

_x000D_

_x000D_


Otra opción podría ser usar los pseudo-elementos ::before o ::after para poner una capa semitransparent encima de la imagen y que de ese modo se vea más oscura. Por ejemplo:

_x000D_

_x000D_

#image {_x000D_
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);_x000D_
  height: 500px;_x000D_
  max-width: 100%;_x000D_
  position:relative;_x000D_
  color: white;_x000D_
  z-index:1;_x000D_
}_x000D_
_x000D_
#image::after {_x000D_
  content:"";_x000D_
  position:absolute;_x000D_
  top:0;_x000D_
  left:0;_x000D_
  width:100%;_x000D_
  height:100%;_x000D_
  background:rgba(0,0,0,0.6);_x000D_
  z-index:-1;_x000D_
}

_x000D_

<div id="image">_x000D_
  HOLA MUNDO_x000D_
</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *