css - 灰度到颜色的过渡在 Firefox 中不起作用

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 设置为:

 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/