Css gray 无法覆盖IE10

网站变灰这个效果很常见，在我这里暂时没有找到最优解决方式，

先把今天的研究结果记录一下。

第一种方案 ：

对所有静态资源文件进行灰度处理，得到新一个资源目录，例如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