Firefox：图像转换，轻松进行灰度调整

我的css支持chrome，当我在Firefox中测试时，它不起作用。这里是代码：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/

来源

2014-01-24 user3207567

CSS滤镜并未在FireFox中实现。您可以使用画布图像操作来回退，但这只是眼睛的糖果 – Mircea

你只是用-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查看兼容性了解更多详情。

来源

2014-01-24 18:01:59

图像是灰色的，悬停时会变为正常颜色，并且不会缓和/中。 – user3207567

这是一个优雅的解决方案，应该足够接近以接受它。 – Mircea

是的，如果没有解决方案进入/退出，我会接受它。顺便说一句，你把过滤器放在img中而不是img：hover中。 http://jsfiddle.net/mr_alien/X8LQk/5/ – user3207567

Firefox：图像转换，轻松进行灰度调整

回答

相关问题