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查看兼容性以获取更多详细信息。< / p>

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

1 个答案: