CSS 过滤器灰度在 Firefox 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16925867/
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 grayscale not working in Firefox
提问by sunshinekitty
I'm having troubles doing a transition from grayscale to colored, it works in chrome, but that is it.
我在从灰度过渡到彩色时遇到了麻烦，它适用于 chrome，但就是这样。
Here is the HTML:
这是 HTML：
<div id="post" style="background-image:url('bg.png');background-repeat:no-repeat;">
<p><a href="/post.php?id=1">Title - Date</a></p>
</div>
Here is the CSS:
这是CSS：
#post{
padding:0;
margin:0 auto;
margin-bottom:25px;
border:solid 1px #000;
height:150px;
width:750px;
display:block;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale");
filter: gray alpha(opacity=50);
-webkit-filter: grayscale(50%);
-webkit-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-moz-transition: 0.3s all ease;
transition: 0.3s all ease;
-webkit-backface-visibility: hidden;
}
#post:hover{
filter: none;
-webkit-filter: grayscale(0%);
}
Thanks for any help, it's appreciated.
感谢您的帮助，不胜感激。
回答by JOSEFtw
Try setting #post:hover to this:
尝试将 #post:hover 设置为：
filter:grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
You can look it up here. http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/
你可以在这里查看。http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/
in case tutorial link will be deadworks in: Safari 6.1.1, Firefox 26.0, Chrome 32.0.1700.77
如果教程链接在以下版本中失效：Safari 6.1.1、Firefox 26.0、Chrome 32.0.1700.77
.slides li img{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
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 */
}
.slides li img:hover{
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
As noted by Adam below: From Firefox 35 filter: grayscale(100%); should work.
正如下面 Adam 所指出的： 来自 Firefox 35 过滤器：灰度（100%）；应该管用。
回答by Adam Fónagy
From Firefox 35 filter: grayscale(100%);should work.
从 Firefox 35filter: grayscale(100%);应该可以工作。
See: https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility
请参阅：https: //developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility
