8

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.

#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%;
}
<div id="image"></div>

5 respuestas 5

14

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:

#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);
}
<div id="image"></div>


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:

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

#image::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  z-index:-1;
}
<div id="image">
  HOLA MUNDO
</div>

1
  • Perfecto @AlvaroMontoro saludos :)
    – Otto
    Commented el 21 oct. 2016 a las 15:57
3

Puedes trabajar con filter

#image {
  background-image:url(http://www.gelfuzion.com/img/slides/nivo/bg-1.jpg);
  height: 500px;
  max-width: 100%;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
<div id="image"></div>

3

Lo consigues con linear-gradient en el background-image:

#image {

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

Si no se acaba de entender bien podéis seguir este breve tutorial de youtube:

https://www.youtube.com/watch?v=ASgmfNvCQRg

4
  • Se te agradece la ayuda, pero por favor considera agregar aquí la explicación, no es muy buena idea mandar al OP a un enlace externo que sobre todo con el tiempo puede caducar
    – user128299
    Commented el 6 nov. 2019 a las 17:09
  • Gracias por la aclaración pero está perfectamente explicado en el mensaje.
    – Dani
    Commented el 8 nov. 2019 a las 10:09
  • El enlace no lleva a ningún recurso relacionado, solo me lleva a mi perfil de YouTube
    – user128299
    Commented el 8 nov. 2019 a las 22:08
  • Cierto, ya he corregido el enlace, mil perdones youtube.com/watch?v=ASgmfNvCQRg
    – Dani
    Commented el 11 nov. 2019 a las 11:16
2

Puedes aplicar algo semejante a ésto:

<style>
img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
</style>

<h1>Image Transparency</h1>
<p>The opacity property specifies the transparency of an element. The lower the value, the more transparent:</p>

<p>Image with 50% opacity:</p>
<img src="img_forest.jpg" alt="Forest" width="170" height="100">

fuente: http://www.w3schools.com/css/tryit.asp?filename=trycss_image_opacity

2
  • Lo he intentado amigo, pero realmente no quiero cambiar la resolución de la imagen de fondo, si no aplicar una capa con un color oscuro transparente, que se ve mucho mejor que aplicar un opacity
    – Otto
    Commented el 21 oct. 2016 a las 15:52
  • sólo quita el width y heigth. Y para tu css, en tu propiedad: #image sólo agrega opacity: 0.5; filter: alpha(opacity=50);
    – Alan
    Commented el 21 oct. 2016 a las 17:20
1

Todos los códigos presentados sirven para el tema en cuestión, lamentablemente no solo afecta a la imagen de fondo, sino que también afecta a las fuentes.

En mi caso, prefiero editar la fotografía :/ es más trabajo, pero más fiable.

2
  • Para que no afecte a las fuentes, habría que cambiar la estructura html un poco para que el texto no vaya dentro del div al que se le aplican los filtros sino en un hermano.
    – Alvaro Montoro
    Commented el 30 mar. 2018 a las 10:23
  • He cambiado un poco la segunda opción que puse para demostrar como no afecta al texto sino sólo a la imagen de fondo.
    – Alvaro Montoro
    Commented el 30 mar. 2018 a las 16:48

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.