1

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

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 中立即更改色标，谢谢

4

2 回答 2

3

好吧，根据“浏览器大战”，没有纯 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。

于 2012-12-01T20:21:29.367 回答
0

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

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

于 2013-02-28T15:23:32.177 回答