其他分享
首页 > 其他分享> > Css gray 无法覆盖IE10

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

标签:gray,img,方案,处理,filter,灰度,IE10,Css
来源: https://blog.csdn.net/weixin_33950035/article/details/93771024