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