Html CSS 过滤器在 Firefox 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12173130/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Filter not working in Firefox
提问by user1251698
I am trying CSS filter but it does not work in my Firefox (15.0) browser.
我正在尝试 CSS 过滤器，但它在我的 Firefox (15.0) 浏览器中不起作用。
HTML:
HTML：
<div class="google">
<img src="https://www.google.com/images/srpr/logo3w.png">
</div>
CSS:
CSS：
.google{
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
回答by defau1t
GrayScale has limitations to work in firefox using a -moz-filter.
GrayScale 使用 -moz-filter 在 Firefox 中工作有限制。
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+ */
回答by aspirinemaga
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 链接
回答by Jonathan Holler
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:
为我解决的是添加“过滤器：灰度（1）” - 就像这样：
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 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+ 怎么样，还没有测试
回答by supersaiyan
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%)
}
