替代Firefox的-webkit转换？

2014-05-20 53 views 0 likes

我使用css3将图像制作成黑白色，然后将它们着色为ob悬停。我使用-webkit-transition在Chrome和Safari中创建了一个很好的效果，并为firefox提供了一个.svg解决方案，其中没有图像转换。是否有可能在Firefox上进行转换？替代Firefox的-webkit转换？

网站：Svenssonsbild.se

CSS：

img.attachment-full { 
filter: grayscale(100%); 
-webkit-filter: grayscale(100%); /* For Webkit browsers */ 
filter: gray; /* For IE 6 - 9 */ 
-webkit-transition: all 1s ease; /* Fade to color for Chrome and Safari */ 
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"); /* Firefox 10+, Firefox on Android */

来源

2014-05-20 user2059370

回答

使用-moz-transition为Firefox。

来源

2014-05-20 10:23:22

使用此（虚拟数据）

-webkit-transition: all 500ms ease; /* Chorme */ 
-moz-transition: all 500ms ease;  /* Firefox */ 
-ms-transition: all 500ms ease;  /* IE */ 
-o-transition: all 500ms ease;   /* Opera */ 
transition: all 500ms ease;   /* All */

来源

2014-05-20 10:25:50 biswajitGhosh

感谢。为Opera，IE和Firefox添加了转场。不能测试IE浏览器，但它似乎并不适用于我的Firefox。它可能与svg过滤器有关吗？ – user2059370

如果你想要你可以使用这样的过滤器： -webkit-filter：grayscale（1）; filter：url（filters.svg＃grayscale）;/* Firefox */ filter：progid：DXImageTransform.Microsoft.BasicImage（灰度= 1） filter：progid：DXImageTransform.Microsoft.Alpha（opacity = 0）;/* IE */** – biswajitGhosh

过滤器我是工作，我只想要webkit转换给出的转换。 – user2059370

替代Firefox的-webkit转换？

回答

相关问题