css图片置灰,变灰效果

css图片置灰,变灰效果

新项目有一个合作伙伴模块，需要将各个企业的logo先置灰，移入再恢复彩色。

首先想到的是一套灰色一套彩色，两者互相切换src,但是觉得都css3了还搞这种方法就有点过时了，而且多一套资源，消耗性能.
- 首先说一下，目前css实现方式是不兼容ie10+的浏览器的，所以对于ie10+的浏览器要使用js操作Canvas来实现；

• 下面是css3的代码实现,兼容Ie9以下，谷歌，火狐，浏览器，不兼容ie10+

.gray { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);