灰度到颜色的转换在firefox中不起作用
灰度到颜色的转换在firefox中不起作用
提问于 2013-05-25 07:28:31
.图片框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。
回答 2
Stack Overflow用户
发布于 2013-06-05 16:17:04
尝试设置.picture-box 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/
Stack Overflow用户
发布于 2014-06-05 01:11:02
问题是Firefox还不支持CSS滤镜效果(从29.0.1开始)，这就是为什么您的第一段代码包含一行SVG滤镜，而Firefox确实支持它。与CSS滤镜效果不同，SVG滤镜不能与CSS一起过渡。
我不知道火狐的纯CSS解决方案，但有几种方法可以用JS解决这个问题(比如用SVG或HTML5画布副本动态替换图像，可以覆盖和淡入淡出)。这个jQuery插件很好地涵盖了大多数浏览器的所有基础：https://github.com/karlhorky/gray
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16744894
复制相关文章
相似问题
腾讯云开发者
