Pregunta Convierta una imagen a escala de grises en HTML / CSS


¿Hay una manera simple de mostrar un mapa de bits de color en escala de grises con solo HTML/CSS?

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

Sé que puedo hacerlo con ambos SVG y Canvas, pero parece mucho trabajo en este momento.

¿Hay alguna forma de hacer esto para una persona realmente perezosa?


576
2018-03-04 04:51


origen


Respuestas:


El soporte para filtros CSS ha aterrizado en Webkit.  Entonces ahora tenemos una solución de navegador cruzado.

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="http://lorempixel.com/400/200/">


¿Qué hay de Internet Explorer 10?

Puedes usar un polyfill como gris.


675
2017-10-26 23:45



Siguiente de La respuesta de brillout.com, y también La respuesta de Roman Nuriky relajando un poco el requisito de "no SVG", puede desaturar imágenes en Firefox usando solo un 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, se puede reutilizar a partir de ahora para cualquier imagen que desee cambiar a escala de grises.

En su CSS hace referencia al filtro usando el específico de Firefox filter propiedad:

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

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

editar: Aquí hay una buena publicación en el blog que describe el uso del nuevo CSS3 filter propiedad en la respuesta de SalmanPK en concierto 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í.


126
2017-11-30 06:57



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

Tomando el código css de la primera respuesta da:

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 debe ser más rápido que el otro porque el navegador no necesitará hacer una segunda solicitud HTTP.


85
2017-11-01 19:32



Actualizar: Hice esto en un repositorio completo de GitHub, que incluye el relleno de JavaScript para IE10 e IE11: https://github.com/karlhorky/gray

Originalmente utilicé La respuesta de SalmanPK, pero luego creó la variación a continuación para eliminar la solicitud HTTP adicional requerida para el archivo SVG. El SVG en línea funciona en las versiones 10 y superiores de Firefox, y las versiones inferiores a 10 ya no representan ni el 1% del mercado global de navegadores.

Desde entonces, he mantenido la solución actualizada en esta publicación en el blog, agregando soporte para volver al color, compatibilidad con IE 10/11 con SVG y escala de grises parcial en la demostración.

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><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>#grayscale");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}

24
2017-12-08 15:41



Si puede usar JavaScript, entonces este script puede ser lo que está buscando. Funciona con navegador cruzado y funciona bien para mí hasta ahora. No puede usarlo con imágenes cargadas desde un dominio diferente.

http://james.padolsey.com/demos/grayscale/


14
2018-03-05 16:04



Acabo de tener el mismo problema hoy. Inicialmente utilicé Solución SalmanPK pero descubrió que el efecto difiere entre FF y otros navegadores. Esto se debe a que la matriz de conversión solo funciona con la luminosidad y no con la luminosidad, como los filtros en Chrome / IE. Para mi sorpresa, descubrí que una solución alternativa y más simple en SVG también funciona en FF4 + y produce mejores resultados:

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

Con css:

img {
    filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

Una advertencia más es que IE10 ya no es compatible con "filter: gray:" en el modo compatible con estándares, por lo que necesita el cambio de modo de compatibilidad en los encabezados para funcionar:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

11
2018-06-11 04:05



No parece que sea posible (todavía), incluso con CSS3 o propietario -webkit- o -moz- Propiedades CSS

Sin embargo, encontré esta publicación del pasado junio que usó filtros SVG en HTML. No está disponible en ningún navegador actual (la demo se insinuó en una compilación WebKit personalizada), pero es muy impresionante como una prueba de concepto.


7
2018-04-28 05:23



Para las personas que preguntan sobre el soporte ignorado de IE10 + en otras respuestas, revisen esta pieza de CSS:

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

svg image:hover {
    opacity: 0;
}

Aplicado en este marcado:

<!DOCTYPE HTML>
<html>
<head>

    <title>Grayscaling in Internet Explorer 10+</title>

</head>
<body>

    <p>IE10 with inline SVG</p>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
      <defs>
         <filter id="filtersPicture">
           <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
           <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
        </filter>
      </defs>
      <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>

</body>
</html>

Para obtener más demos, consulte la prueba IE drivedrive Sección de gráficos CSS3 y este viejo blog de IE http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx


7
2017-10-26 18:58



En Internet Explorer usa la propiedad de filtro.

En webkit y Firefox actualmente no hay forma de desatuarte una imagen únicamente con CSS. por lo que deberá usar canvas o SVG para una solución del lado del cliente.

Pero creo que usar SVG es más elegante. echa un vistazo a mi publicación de blog para la solución SVG que funciona tanto para Firefox como para webkit: http://webdev.brillout.com/2010/10/desaturate-image-without-javascript.html

Y estrictamente hablando, dado que SVG es HTML, la solución es pura html + css :-)


7
2018-03-02 18:17