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的能力
Css gray 无法覆盖IE10的更多相关文章
- css gray,grayscale,css变灰兼容大部分浏览器
css gray,grayscale,css变灰兼容大部分浏览器 html { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht ...
- 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖
1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...
- CSS之边框覆盖
今天想做一个淘宝导航来练练手,遇到了边框覆盖的问题.如下图: li的红色边框盖不住该灰色边框.后来问经验人士告诉我,这种边框覆盖是会出现无法100%保证正常的情况,遂得到如下3中解决方案: 1.以后遇 ...
- CSS中样式覆盖优先顺序
原文地址:http://www.3lian.com/edu/2014/09-25/168393.html 层叠优先级是: 浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式 其 ...
- css区分ie8/ie9/ie10/ie11 chrome firefox的代码
以下是几个主要浏览器的css hack汇总: 现有css样式为: .class{ color:red; } 判断IE8以上的浏览器才执行的代码/* IE8+ */ .class{ color:red ...
- 原来css可以直接覆盖内联style
今天阅读博文新手如何在gdb中存活时,发现行距太小,阅读起来不舒服. 查看了一下html代码,发现是博文内容中的内联style(line-height: normal)覆盖了博客模板的css引起的. ...
- CSS中div覆盖另一个div
将一个div覆盖在另一个div上有两种手段:一是设置margin为负值,二是设置绝对定位. 可以根个人情况设置z-index的值 1->position 为absolute的情况 <htm ...
- css样式被覆盖解决方案
刚才写zenktodo的时候,通过动态添加class的方式修改一个div的样式,总是不起作用. #navigator { height: 100%; width: 200; position: abs ...
- 【知识总结】CSS中样式覆盖优先顺序
层叠样式类型 类型: 1. 浏览器默认样式 2. 浏览器用户自定义样式 3. 外部样式表 4. 内部样式表 5. 内联样式表 顺序: 浏览器默认样式 < 浏览器用户自定义样式 < 外部样式 ...
随机推荐
- Flink深入浅出: 资源管理(v1.11)
-- 图片来自 <国家地理中文网>-- 往期推荐: Flink深入浅出:部署模式 Flink深入浅出:内存模型 Flink深入浅出:JDBC Source从理论到实战 Flink深入浅出: ...
- SpringBoot+Activiti+bpmn.js+Vue.js+Elementui(OA系统审批流)
引言:OA系统用到请假.加班.调休.离职,需要使用工作流进行流程审批 一:activiti流程设计器的选择(通过学习activiti工作流过程中,发现一款好的流程设计器将会更好的方便的设计好流程(主要 ...
- Prometheus入门教程(二):Prometheus + Grafana实现可视化、告警
文章首发于[陈树义]公众号,点击跳转到原文:https://mp.weixin.qq.com/s/56S290p4j9KROB5uGRcGkQ Prometheus UI 提供了快速验证 PromQL ...
- Hybrid App中原生页面 VS H5页面
Hybrid App中原生页面 VS H5页面 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Nativ ...
- jmeter_03_鉴权
jmeter权鉴* 1.配置节点 - 2.前置处理器 3.定时器 4.取样器 5.后置处理器(只在有结果的情况下执行) 6.断言(只在有结果的情况下执行) 7.监听器(只在有结果的情况下执行) 参数叠 ...
- linux(centos8):查看操作系统的当前版本(os/kernel/bash)
一,查看redhat系操作系统的版本: 适用于centos/fedora/rhel等 [root@centos8 ~]# cat /etc/redhat-release CentOS Linux re ...
- 【Azure云服务 Cloud Service】Cloud Service的实例(VM)中的服务描述Software Protection 与 Windows Defender, 如何设置Windows Defender Antivirus服务
1)Software Protection 与 Windows Defender是两个独立的服务.在Windows 服务中他们的描述分别为 Software Protection Enables th ...
- PS模式编辑
5.1PS灰度模式 (1)灰度模式:最多包含256种灰度的8位图像. (2)模式含义:不同模式对颜色的分类甚至种类都不一样,可以理解为格式不一样. (3)灰度模式:可以在去RGB格式下去色处理达到利斯 ...
- 怎么购买合适的4G DTU
4G DTU指的是采用FDD-LTE或者TD-LTE的4G网络实现将是本地串口数据进行无线长距离数据传输,和远程公网服务器进行数据交互,主要用于远程数据采集和远程控制项目.在购买之前,也要对4G DT ...
- Vue、Node全栈项目~面向小白的博客系统~
个人博客系统 前言 ❝ 代码质量问题轻点喷(去年才学的前端),有啥建议欢迎联系我,联系方式见最下方,感谢! 页面有啥bug也可以反馈给我,感谢! 这是一套包含前后端代码的个人博客系统,欢迎各位提出建议 ...