html - w3schools - translate css animation

El filtro CSS no funciona en Firefox

Question

Estoy probando el filtro CSS pero no funciona en mi navegador Firefox (15.0).

HTML:

<div class="google">
     <img src="https://www.google.com/images/srpr/logo3w.png">
</div>

CSS:

.google{   
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}

Demostración: http://jsfiddle.net/xDJzU/

Answer 1

Este código funcionará para usted 100%.

.google{
    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"); 
    filter: gray;
    -webkit-filter: grayscale(100%)
}

Answer 2

GrayScale tiene limitaciones para trabajar en Firefox usando un filtro -moz.

Para que funcione, use el siguiente fragmento de código:

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"); /* Firefox 3.5+ */

DEMO

Answer 3

También tuve el problema de que en Firefox 39.0 las imágenes desaparecían completamente cuando las usaba

    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"); /* Firefox 3.5+ */

Lo que lo resolvió para mí fue agregar "filter: grayscale (1)", así:

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"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
filter: grayscale(1); /* Firefox 39 (and above? Don´t know) */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

Esto lo hizo funcionar para mí. No sé qué sobre IE 10+, no lo he probado

Answer 4

Vuelva a escribir su código css con este, suponiendo que está intentando obtener una imagen en escala de grises:

.google{
    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"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
​

Actualizado jsfiddle: jsfiddle link