Html 彩色图像到灰度图像在firefox中不起作用

因为我在用这个

img{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: gray;/*ie fallback*/
    filter: grayscale(100%);
}

它在铬合金中工作。但不能在firefox中工作。我正在使用Firefox27.1

---

首先，我应该注意到CSS是一种实验性技术，它只在Webkit中实现，不具备浏览器兼容性

但是，对于Firefox3.5+，您可以将和用于SVG

由于我们必须针对

过滤器

元素（在本例中是通过

#灰度

），因此我们不应该这样做

因此，我们可以将空格字符编码为

%20

，以使数据URI正常工作：

filter:url（“数据：image/svg+xml；utf8，#灰度”）；

给你：

img{
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；/*Firefox 3.5+*/
过滤器：灰色；/*IE6-9*/
-webkit过滤器：灰度（1）；/*谷歌浏览器、Safari 6+和Opera 15+*/
}
img:hover{/*删除悬停时的筛选器。如果不需要，请删除此筛选器*/
过滤器：无；
-webkit过滤器：灰度（0）；
}

要在Firefox4+中获得相同的效果，我们需要使用SVG过滤器

-您需要添加SVG过滤器-

过滤器：url（filter.SVG#greyscale）

-然后创建

filter.svg