Question

有人可以告诉我如何修改以下代码，以便在所有浏览器中实现平滑的淡入淡出过渡吗？

img.grayscale {
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 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
img.grayscale.disabled {
filter: none;
-webkit-filter: grayscale(0%);
}

现在它正在改变Firefox中的色标，谢谢

Answer 1

嗯，根据“浏览器大战”没有纯粹的CSS3解决方案，其中一些浏览器支持某些功能，有些则不支持。但是，对于现代浏览器（Chrome，Safari 4 +，Firefox 11 +？，Opera 12+？和IE 10+），您可以使用CSS3。这是一些代码：

img.grayscale {
    -webkit-transition: -webkit-filter .3s ease-in; /* chrome & safari */
    -moz-transition: filter .3s ease-in; /* firefox and other gecko-based */
    -ms-transition: filter .3s ease-in; /* ie 10+ */
    -o-transition: filter .3s ease-in; /* opera */
    transition: filter .3s ease-in; /* w3 (future standard) */
}

然而，有一些跨浏览器的补救措施，只是不纯粹使用CSS。

Answer 2

目前，执行此跨浏览器的最简单方法仍然是保留2个图像副本（一个灰度）并转换不透明度。

使用相同的技术（2个重叠图像 - 将顶部图像淡出），您可以构建顶部和底部是相同图像的内容，但顶部上有所有特定于浏览器的过滤器。

CSS3平滑交叉浏览器灰度图像

2 个答案: