Question

我在我的网站上的图像上使用灰度滤镜，图像在悬停时切换为彩色，淡入和淡出0.3s。它在Chrome上完美运行，但在firefox中却没有...我一直在网上寻找解决方案，但它们都没有工作......有没有人知道这样做的方法？有没有新的CSS解决方案与Firefox？

这是我的css：

.img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
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 4+ */
filter: gray; /* IE 6-9 */
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
filter-transition: all 0.6s ease-in-out;
}

.img:hover{ 
-webkit-filter: none;
-moz-filter:none;
-ms-filter: none;
-o-filter:none;
filter: none;
}

这是一个jsfiddle：

http://jsfiddle.net/25hrJ/

感谢您的帮助！

Answer 1

我不认为Firefox正好支持背景动画。你用JQuery .animation尝试过吗？

另一种（hacky）解决方案是尝试将图像不透明度淡化为0％。如果可以的话，你可以在彩色图像前面放一个灰度图像，让灰度图像渐渐消失，让彩色图像渐渐消失。

firefox css灰度过滤器过渡

1 个答案: