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. 内联样式表 顺序: 浏览器默认样式 < 浏览器用户自定义样式 < 外部样式 ...
随机推荐
- 用 Java 实现的八种常用排序算法
八种排序算法可以按照如图分类 交换排序 所谓交换,就是序列中任意两个元素进行比较,根据比较结果来交换各自在序列中的位置,以此达到排序的目的. 1. 冒泡排序 冒泡排序是一种简单的交换排序算法,以升序排 ...
- 三门峡6378.7939(薇)xiaojie:三门峡哪里有xiaomei
三门峡哪里有小姐服务大保健[微信:6378.7939倩儿小妹[三门峡叫小姐服务√o服务微信:6378.7939倩儿小妹[三门峡叫小姐服务][十微信:6378.7939倩儿小妹][三门峡叫小姐包夜服务] ...
- MeteoInfoLab脚本示例:OMI Swath HDF数据
这个例子读取OMI卫星Swath数据中的CloudFaction变量并绘图.脚本程序: #Add data file folder = 'D:/Temp/hdf/' fns = 'OMI-Aura_L ...
- day53 Pyhton 前端04
内容回顾: 盒子: 内边距:padding,解决内部矛盾,内边距的增加整个盒子也会增加 外边距:margin,解决外部矛盾,当来盒子都有外边距的时候,取两者最大值 边框:border border-c ...
- [leetcode] 剑指 Offer 专题(一)
又开了一个笔记专题的坑,未来一两周希望能把<剑指Offer>的题目刷完
- 可变数据类型不能作为python函数的参数
可变数据类型:列表.字典 不可变数据类型:整型.浮点型.字符串.元组 为什么可变数据类型不能作为python函数的参数?请看以下例子: def foo(a=[]): a.append(1) retur ...
- selenium--数据填充
from time import sleep from selenium import webdriver br = webdriver.Chrome() url = "https://ww ...
- js改变,设置table单双行颜色,jquery改变,设置table单双行颜色
1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr ...
- selenium中如何保证操作元素的成功率?也就是说如何保证我点击的元素一定是可以点击的?
1.在寻找元素时,加上显示等待或者隐式等待,这样在对元素进行操作之前保证元素被找到,进而提高成功率: 2.在对元素操作之前,比如click,如果该元素未display(非hidden),就需要先滚动到 ...
- STM32入门系列-GPIO工作模式及LED电路原理
GPIO工作模式 由于GPIO内部的结构关系,决定了GPIO可配置成以下几种模式. 输入模式 在输入模式时,施密特触发器打开,输出被禁止.可通过输入数据寄存器GPIOx_IDR读取I/O状态.输入模式 ...