Convertir una imagen a escala de grises en HTML/CSS

¿Existe una forma sencilla de mostrar un mapa de bits en color en escala de grises con solo HTML/CSS?

No es necesario que sea compatible con IE (y me imagino que no lo será); si funciona en FF3 y/o Sf3, es suficiente para mí.

Sé que puedo hacerlo tanto con SVGCanvas como con Canvas, pero parece mucho trabajo en este momento.

¿Existe una manera verdaderamente perezosa de hacer esto?

Mar 04 '09 11:03 Ken

La compatibilidad con filtros CSS ha llegado a Webkit. Ahora tenemos una solución para varios navegadores.

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png">

Expandir fragmento

¿Qué pasa con Internet Explorer 10?

Puedes usar un polirelleno como el gris .

Dec 23 '2011 03:12 Samuel Katz

Siguiendo con la respuesta de brilloout.com , y también con la respuesta de Roman Nurik , y relajando un poco el requisito de "no SVG", puede desaturar imágenes en Firefox usando solo un único archivo SVG y algo de CSS.

Su archivo SVG se verá así:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0      0      0      1 0"/>
    </filter>
</svg>

Guárdelo como resources.svg, puede reutilizarlo de ahora en adelante para cualquier imagen que desee cambiar a escala de grises.

En su CSS hace referencia al filtro utilizando la filterpropiedad específica de Firefox:

.target {
    filter: url(resources.svg#desaturate);
}

Agregue también los propietarios de MS si lo desea, aplique esa clase a cualquier imagen que desee convertir a escala de grises (funciona en Firefox >3.5, IE8) .

editar : Aquí hay una buena publicación de blog que describe el uso de la nueva filterpropiedad CSS3 en la respuesta de SalmanPK junto con el enfoque SVG descrito aquí. Usando ese enfoque terminarías con algo como:

img.desaturate{
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

Más información de soporte del navegador aquí .

Oct 26 '2010 23:10 robertc

Para Firefox no necesita crear un archivo filter.svg, puede usar el esquema URI de datos .

Tomando el código CSS de la primera respuesta se obtiene:

filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%); 
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */

Tenga cuidado de reemplazar la cadena "utf-8" por la codificación de su archivo.

Este método debería ser más rápido que el otro porque el navegador no necesitará realizar una segunda solicitud HTTP.

Nov 30 '2012 06:11 mquandalle