灰度到颜色的转换在firefox中不起作用

Question

.图片框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);

}

.图片框img：悬停｛

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

尝试设置。图片框img：悬停到此：

 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