Firefox：图像过渡，减轻灰度

Question

我有在chrome中工作的css，当我在Firefox中进行测试时，它将无法工作。 这是代码：

<div class="img">
<a href="/">
<img src="http://upload.wikimedia.org/wikipedia/commons/8/80/Knut_IMG_8095.jpg" alt="Smiley face" height="400" width="600">
</a>
</div>



img {
      -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
    display: block;
    }

img:hover {
    -webkit-filter: grayscale(100%);
    display: block;
    }

演示： http ： //jsfiddle.net/X8LQk/2/

Answer 1

您仅使用-webkit-filter ，对于Firefox，您将需要SVG过滤器

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

演示

---

唯一的问题是，到目前为止，除Chrome之外，您将无法传递灰色效果，可以在MDN或“我可以使用”中查看兼容性，以了解更多详细信息。