html - CSS 过滤器在 Firefox 中不起作用

Question

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

Answer 1

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