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.

Leave a Reply

Your email address will not be published. Required fields are marked *