Css SVG过滤器，在Firefox中转换_Css_Cross Browser_Css Transitions_Svg Filters

Css SVG过滤器，在Firefox中转换

css

Css SVG过滤器，在Firefox中转换,css,cross-browser,css-transitions,svg-filters,Css,Cross Browser,Css Transitions,Svg Filters,我正在制作一个网页，如果你把鼠标悬停在一张图片上，它会去饱和。它在Chrome和IE中工作。然而，我无法在FF中过渡到工作状态，而且在Opera中它根本不会去饱和这是我的密码： <!DOCTYPE html> <head> <style type="text/css"> img:hover { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht

我正在制作一个网页，如果你把鼠标悬停在一张图片上，它会去饱和。它在Chrome和IE中工作。然而，我无法在FF中过渡到工作状态，而且在Opera中它根本不会去饱和

这是我的密码：

<!DOCTYPE html>

<head>      
<style type="text/css">
    img:hover {         
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.0\'/></filter></svg>#grayscale"); /* Firefox */
        filter: gray; /* IE */
        -moz-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        -webkit-filter: grayscale(1); /* Webkit */}

    img {           
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -o-filter: grayscale(0);
        filter: none;
        filter: grayscale(0);}

    img.transition {
        -moz-transition: all 0.5s ease-in-out; /* FF */
        -o-transition: all 0.5s ease-in-out; /* Opera 10.5 */
        -webkit-transition: all 0.5s ease-in-out; /* Webkit */
        transition: all 0.5s ease-in-out;}
</style>
</head>

<html>
<body>
    <img src="http://www.wallpapershd.biz/wallpapers/2012/12/Cardinal-Bird-1024x1280.jpg" width="500" class="transition" />
</body>
</html>


img:hover{
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；/*Firefox*/
过滤器：灰色；/*IE*/
-moz滤波器：灰度（100%）；
-o-过滤器：灰度（100%）；
-webkit过滤器：灰度（1）；/*webkit*/}
img{
-webkit过滤器：灰度（0）；
-moz过滤器：灰度（0）；
-o-过滤器：灰度（0）；
过滤器：无；
过滤器：灰度（0）；}
过渡{
-moz转换：所有0.5s的易入易出；/*FF*/
-o型过渡：所有0.5s易于输入输出；/*Opera 10.5*/
-webkit过渡：所有0.5s易入易出；/*webkit*/
过渡：所有0.5s的缓进缓出；}

我见过类似的问题，但我是个初学者，所以答案有点抽象；您不必亲自向我提供代码，但请给我一个我能理解的较为详细的答案。如果有人能帮我，那太好了。

为什么不使用从红色到灰色的简单颜色转换呢？

对不起，在Firefox中这看起来是不可能的。可能与此重复：