CSS过滤器灰度无法在Firefox中运行-CSSfiltergrayscalenotworkinginFirefox

29  

Try setting #post:hover to this:

尝试设置#post：将鼠标悬停在此：

  filter:grayscale(0%); 
  -webkit-filter: grayscale(0%);
  filter: url("data:image/svg+xml;utf8,#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 dead works 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,#grayscale"); /* Firefox 10+, Firefox on Android */
}
.slides li img:hover{
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: url("data:image/svg+xml;utf8,#grayscale");
}

As noted by Adam below: From Firefox 35 filter: grayscale(100%); should work.

如下Adam所述：来自Firefox 35过滤器：灰度（100％）;应该管用。

1  

From Firefox 35 filter: grayscale(100%); should work.

来自Firefox 35过滤器：灰度（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