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. 内联样式表 顺序: 浏览器默认样式 < 浏览器用户自定义样式 < 外部样式 ...
随机推荐
- CDH5部署三部曲之一:准备工作
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- object-fit 详解
contain 被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比. 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加"黑边". cov ...
- docker的run操作
docker的run到底做了什么操作呢? 它会优先寻找本地的镜像,如果没有就到仓库找,找不到返回错误,查找不到该镜像.能找到就拉这镜像下来,以该镜像为模板生产容器实例运行. 备注:图不是自己画的,截图 ...
- OpenCV计算机视觉学习(4)——图像平滑处理(均值滤波,高斯滤波,中值滤波,双边滤波)
如果需要处理的原图及代码,请移步小编的GitHub地址 传送门:请点击我 如果点击有误:https://github.com/LeBron-Jian/ComputerVisionPractice &q ...
- 多测师讲解自动化测试 _RF分配id_高级讲师肖sir
1.Assign Id To Element.
- Pyhton中获取列表的索引
index方法 list_a= [12,213,22,2,32] for a in list_a: print(list_a.index(a)) 结果: 0 1 2 3 4 如果列表的没有重复项的话那 ...
- gti 常用命令
git add 文件 : 追踪指定文件git add . :追踪所有的文件git commit -m "注释" : 提交报本地仓库git push : 推送远程仓库git pull ...
- react渲染数据3种方式
直接渲染,()类似于模板字符串,包裹一个dom元素 ReactDOM.render( (<div> <h2>现在时间:{new Date().toLocaleTimeStrin ...
- Centos7 安装python环境
保留python2 找到python所在位置,把python指向python2.7备份 [root@sun /usr/bin]# cd ~ [root@sun ~]# whereis python p ...
- vue知识点12
知识点归纳整理如下: 1. 数组用下标改变,或者对象增加属性,这样的改变数据 是不能触发视图更新的,要用 Vue.set(对象,属性,值) 或this.$set(对象,属性,值) 2. this. ...