1

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

4

2 回答 2

0

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

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

于 2014-06-04T17:11:01.787 回答
0

尝试将 .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/

于 2013-06-05T08:17:03.700 回答