网站变灰这个效果很常见，在我这里暂时没有找到最优解决方式，
先把今天的研究结果记录一下。
第一种方案 ：
对所有静态资源文件进行灰度处理，得到新一个资源目录，例如asset_ori 原始资源 asset_gray灰度资源，将文件映射指向灰度资源
这里面包括对img以及css中所有颜色属性的处理，css里面最好不要有red,green这种字母颜色，但是还是会有#xyz,rgb(x,y,z),rgba(x,y,z,o)
灰度算法
临时变量=(原红色值*30+原绿色值*59+原蓝色值*11)/100;
原红色值=临时变量;
原绿色值=临时变量;
原蓝色值=临时变量;
第二种方案 CSS方案：
针对IE10以下 filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
针对IE10 不支持filter
针对chrome filter:grayscale(1);
针对firefox filter: url(desaturate.svg#grayscale); 利用svg，经测试，发现只能运用在img元素上，其他元素上运用直接不可见了
针对Opera 暂未找
第三种方案 js方案
不说性能，先说原理，利用canvas对图片进行灰度处理，得到base64的新图像数据，可以直接设置在img的src或者element的backgroud-image上。
为了达到这个目的，可以在样式中预留出需要重新编译的部分，比如 .add.gray, .upload.gray，使用js将里面的background-image重新设置
这个方案最终接近于第一种方案，只不过处理的动作和时间放在了客户端
三种方案比较
第一种是完美的，可以写个通用程序处理，工作量也不大，但是对于海量图片，这磁盘消耗就X2了，如果再有CDN，那消耗就更大了
第二种很便捷，不完美，有浏览器兼容问题。
第三种看起来很美，能完美处理，处理动作和时间都放在了客户端，只是优化的问题还需要再考虑
综合起来
我倾向于三种综合处理，根据场景，1||1+2||1+2+3，尽可能地利用原生CSS的能力
转载于:https://www.cnblogs.com/jamesldj/p/3354474.html