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

Demo

---

唯一的问题是目前除了 Chrome 之外您将无法传输灰色效果，您可以在 MDN 查看兼容性。或在 Can I Use了解更多详情。