CSS过滤器在Firefox中不起作用

I am trying CSS filter but it does not work in my Firefox (15.0) browser.

我正在尝试CSS filter，但是它在我的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%);
}

Demo: http://jsfiddle.net/xDJzU/

演示:http://jsfiddle.net/xDJzU/

4 个解决方案

#1

GrayScale has limitations to work in firefox using a -moz-filter.

灰度在firefox中使用- mozilla过滤器是有限制的。

To get it working use the below snippet:

要让它工作，请使用下面的代码片段:

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

Rewrite your css code with this one, assuming that you're trying to achieve a grayscale image:

用这段代码重写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+ */
}

Updated jsfiddle: jsfiddle link

更新jsfiddle:jsfiddle链接

#3

I also had the problem that in Firefox 39.0 images completely dissappeared when I used

我还遇到了一个问题，在我使用的时候，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+ */

What solved it for me was to add "filter: grayscale(1)" - just like that:

解决这个问题的办法是添加“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 */

This made it work for me. Don't know what about IE 10+ though, haven't testet it

这使它对我起作用。我不知道IE 10+是什么，没有测试过。

#4

This code will work for you 100%.

此代码将为您工作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%)
}

#1