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…