Фильтр CSS не работает в Firefox

Я пытаюсь использовать фильтр CSS, но он не работает в моем браузере 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%);
}

Демо: http://jsfiddle.net/xDJzU/

Ответ 1

GrayScale имеет ограничения на работу в firefox с использованием -moz-фильтра.

Чтобы заставить его работать, используйте нижеприведенный фрагмент:

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

Ответ 2

Перепишите код css с этим, предполагая, что вы пытаетесь получить изображение в оттенках серого:

.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+ */
}

Обновлен jsfiddle: ссылка jsfiddle

Ответ 3

У меня также была проблема, что в Firefox 39.0 изображения полностью исчезли, когда я использовал

    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: grayscale (1)" - вот так:

filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;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\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#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 */

Это заставило его работать на меня. Не знаю, что относительно IE 10+, хотя, не проверяйте его

Ответ 4

Этот код будет работать для вас на 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%)
}