Oscurecer una imagen de fondo con css
Me he encontrado muchas veces en esta tesitura, me dan unas imágenes que son demasiado luminosas y tengo que oscurecerlas para que el texto, otros elementos… resalten.
Hasta no hace mucho mi modus operandi era irme a PhotoShop y ponerle una capa a la imagen, descargarla para web, sustituir la que tenía y esperar haber dado con el indice de opacidad o con el filtro que necesitaba. Y si no era así pues a repetir la operación.
Pero se puede hacer desde CSS por medio de un pseudoelemento de la siguiente forma…
Imaginemos que tenemos una imágen de fondo en el body y queremos añadirle un filtro opaco, para ello tendremos que hacer simplemente el siguiente código CSS:
body{ background-image: url("imagen.jpg"); background-color: #cccccc; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } body:before { content:''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,0.3); }
Con esto ponemos una capa despues del elemento body y le decimos que tenga un color y una opacidad pisando a la imagen de fondo.
Ahora solo imagina las posibilidades de este código tan sencillo…