CSS3平滑跨浏览器灰度图像

有人可以让我知道如何修改以下代码以在所有浏览器中进行平滑淡入淡出？CSS3平滑跨浏览器灰度图像

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一次改变颜色规模，要归功于

来源

2012-12-01 Behseini

那么，有没有纯粹的CSS3解决这个按照“浏览器大战”，其中一些浏览器支持某些功能和一些别“T。但是，对于现代浏览器（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-01 20:21:29 ModernDesigner

目前最简单的方法来做这个跨浏览器仍然只保留图像（一个灰度）的2个副本，并过渡不透明度。您可以使用相同的技术（2个重叠图像 - 淡出顶部图像），也许可以构建顶部和底部都是相同图像的东西，但顶部具有所有浏览器特定的滤镜。

来源

2013-02-28 15:23:32

CSS3平滑跨浏览器灰度图像

回答

相关问题