CSS Filter在Firefox中不起作用

时间:2012-08-29 07:48:35

标签: html css css3

我正在尝试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/

4 个答案:

答案 0 :(得分:50)

GrayScale使用-moz-filter在firefox中有限制。

要使其正常运行,请使用以下代码段:

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

答案 1 :(得分:13)

使用此代码重写您的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 link

答案 2 :(得分: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+怎么样,还没有测试它

答案 3 :(得分:0)

此代码将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%)
}