Firefox:图像过渡，轻松到灰度

Question

我的CSS在Chrome中起作用，当我在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

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的兼容性，或者我可以使用更多详细信息。