Question

.picture-box img {

display: inline-block;
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 3.5+ */
filter: gray; /* IE6-9 */
filter: grayscale(100%);
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);

}

.picture-box img：hover {

filter: none; /* IE6-9 */
filter: grayscale(0);
-webkit-filter: grayscale(0);
-moz-filter: grayscale(0);
-o-filter: grayscale(0);
-ms-filter: grayscale(0);

-webkit-transition: all 2.0s ease-out;
-moz-transition: all 2.0s ease-out;
-ms-transition: all 2.0s ease-out;
-o-transition: all 2.0s ease-out;
transition: all 2.0s ease-out;

}

这段代码有什么问题？转换在Firefox中不起作用。我安装了21.0。

Answer 1

尝试设置.picture-box img：hover to this：

 filter:grayscale(0%); 
 -webkit-filter: grayscale(0%);
 filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");

你可以在这里查找。 http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/

Answer 2

问题是Firefox还不支持CSS过滤效果（截至29.0.1），这就是为什么你的第一个代码块包含一个SVG过滤器的行，Firefox确实支持这一行。与CSS滤镜效果不同，SVG滤镜无法通过CSS进行过渡。

我不知道任何适用于Firefox的纯CSS解决方案，但有几种方法可以用JS解决它（例如用可以叠加和淡化的SVG或HTML5画布副本动态替换图像）。这个jQuery插件可以很好地覆盖大多数浏览器的所有基础：https://github.com/karlhorky/gray

灰度到颜色过渡不适用于Firefox

2 个答案: