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

Posted 2023-03-06

【中文标题】灰度到颜色转换在Firefox中不起作用

【英文标题】：Grayscale to color transition not working in firefox

【发布时间】：2013-05-20 15:22:47

【问题描述】：

.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。

【问题讨论】：

您是否尝试将top: 值添加到两者？例如。 top:0;。如果你给我一个 jsFiddle，我肯定能修复它

让我把它放在一个小提琴中。

你有 jsFiddle 吗？把它链接在这里:)

jsfiddle.net/amrebel/D9dUAthanx :)

几件事： 1. Firefox 从未实现过-moz-filter，让它工作的唯一方法是使用你所使用的：filter:url("...")。请参阅this 2. 众所周知，Firefox 不会转换 css 过滤器值，如您所见 here 或 here。

【参考方案1】：

问题在于 Firefox 还不支持 CSS 滤镜效果（从 29.0.1 开始），这就是为什么您的第一个代码块包含一行 SVG 滤镜，而 Firefox 确实支持该滤镜。与 CSS 滤镜效果不同，SVG 滤镜不能使用 CSS 进行过渡。

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

【参考方案2】：

尝试将 .picture-box img:hover 设置为此：

 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/

【讨论】：

谢谢，但它不起作用。我想要淡入淡出过渡。它只是从灰色变为彩色。