CSS过滤器不能在Firefox中工作 [英] CSS Filter not working in Firefox

问题描述

我尝试CSS过滤器，但它不工作在我的Firefox（15.0）浏览器。

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

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/

推荐答案

GrayScale使用-moz过滤器在firefox中工作。

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

要使其正常工作，请使用以下代码片段：

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

这篇关于CSS过滤器不能在Firefox中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！