CSS过滤器灰度在Firefox中不起作用

我在做从灰度到彩色的转换时遇到了麻烦，它在铬上工作，但就是这样

以下是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>

以下是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%);
}

#post{
填充：0；
保证金：0自动；
边缘底部：25px；
边框：实心1px#000；
高度：150像素；
宽度：750px；
显示：块；
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；
过滤器：灰色alpha（不透明度=50）；
-webkit过滤器：灰度（50%）；
-webkit过渡：0.3s全轻松；
-o-过渡：0.3s，所有缓解；
-moz过渡：0.3s全轻松；
过渡期：0.3秒全部缓解；
-webkit背面可见性：隐藏；
}
#帖子：悬停{
过滤器：无；
-webkit过滤器：灰度（0%）；
}

感谢您的帮助，非常感谢。

尝试设置#post:将鼠标悬停到以下位置：

  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");

过滤器：灰度（0%）；
-webkit过滤器：灰度（0%）；
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；

你可以在这里查

以防教程链接失效 适用于：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");
}

.slides li img{
滤镜：灰度（100%）；
-webkit过滤器：灰度（100%）；/*用于webkit浏览器*/
过滤器：灰色；/*用于IE 6-9*/
-webkit过渡：所有.6s易用；/*铬合金和Safari颜色渐变*/
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；/*Firefox 10+，Android上的Firefox*/
}
.幻灯片李明：悬停{
滤镜：灰度（0%）；
-webkit过滤器：灰度（0%）；
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；
}

正如Adam在下文中指出的：

---

来自Firefox 35过滤器的灰度（100%）；应该可以用。

来自Firefox35

过滤器：灰度（100%）应该可以工作

请参阅：
对于那些无法使用它的用户，您应该访问此答案中链接的教程，帮助我更好地理解如何使用它。仅供参考：使此示例起作用的是行
filter:url（“data:image/svg+xml；utf8，#grayscale”）
用于100%灰度，反之-
过滤器：url（“数据：image/svg+xml；utf8，#灰度”）}
用于0%灰度（续..）这是因为Firefox没有用于过滤的
灰度
的默认值矩阵，因此明确声明它们可以解决问题。您不能将其与
混合模式：乘法组合思想在FF 47.0.1上无法实现此功能。有什么新的解决方法吗？确实，你可以结合到
mix混合模式：multiply。谢谢。不是对旧版本的修复，而是作为FF更新本身。。。