¿Cómo poner una capa oscura a una imagen de fondo (overlay) con CSS3?

En el día de hoy vamos a ver cómo poner una capa oscura con CSS3 a una imagen de fondo (overlay) para que contraste con los elementos que tenemos encima.

Este opción es solo con CSS3, sin usar JavaScript ni nada que nos complique la vida.

Paso 1:

Buscamos nuestro contenedor que tiene la imagen de fondo

Si nosotros mismos habíamos puesto el HTML iremos mucho más rápido, por que ya sabríamos a cual class ó id apuntar.

Si lo hiciste con un maquetador visual, tan solo inspeccionamos desde nuestro navegador favorito y buscamos el ID o la Class que necesitamos.

Otra opción es ponerle la class desde el editor de wordpress

Paso 2

Le damos estilos al fondo.

figure.img-fondo {
	position: relative;
}

Con la propiedad position:relative indicaremos al pseudo-elemento que crearemos en un momento que no se salga de nuestro contenedor .img-fondo.

Paso 3 capa oscura con CSS3 a una imagen de fondo (overlay)

Ahora lo que haremos sera aplicar los estilos al pseudo-elemento :before, que no hace otra cosa más que añadir contenido «antes» de nuestro contenedor con fondo, para mover un poco su opacidad y así oscurecer el fondo. El código CSS que necesitaremos sera el siguiente:

figure.img-fondo:before {
	content:'';
	position: absolute;
        top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,0.6);
}

Aquí es donde le estamos dando todos los valores para que quede estirada nuestra capa y le estamos dando dando color con una opacidad de 0.6. Ustedes pueden jugar con estos valores dependiendo del tipo de diseño que tengan.

Y cuando te preguntes cómo poner una capa oscura con CSS3 a una imagen de fondo (overlay) pues ya sabrás la respuesta! Un saludo.

Sin Overlay

Con Overlay

Comparte para enseñar a otros

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.