Imágenes en blanco y negro (escala de grises) con CSS3

Mostrar imágenes en blanco y negro a partir de imágenes en color es tan fácil como aplicar el filtro CSS grayscale().

Con el filtro grayscale podemos presentar una imagen en escala de grises en un porcentaje del 0 al 100. El valor que ponemos entre paréntesis define la proporción de la conversión. Un valor de 100% nos dará una imagen completamente en escala de grises. Un valor de 0% deja la imagen sin cambios. Los valores entre 0% y 100% son multiplicadores lineales del efecto.

Con el siguiente código, cualquier imagen que tenga asignada la clase CSS bn se mostrará completamente en escala de grises.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *