网站变灰这个效果很常见,在我这里暂时没有找到最优解决方式,

先把今天的研究结果记录一下。

第一种方案 :

对所有静态资源文件进行灰度处理,得到新一个资源目录,例如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的更多相关文章

  1. css gray,grayscale,css变灰兼容大部分浏览器

    css gray,grayscale,css变灰兼容大部分浏览器 html { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht ...

  2. 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖

    1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...

  3. CSS之边框覆盖

    今天想做一个淘宝导航来练练手,遇到了边框覆盖的问题.如下图: li的红色边框盖不住该灰色边框.后来问经验人士告诉我,这种边框覆盖是会出现无法100%保证正常的情况,遂得到如下3中解决方案: 1.以后遇 ...

  4. CSS中样式覆盖优先顺序

    原文地址:http://www.3lian.com/edu/2014/09-25/168393.html 层叠优先级是: 浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式 其 ...

  5. css区分ie8/ie9/ie10/ie11 chrome firefox的代码

    以下是几个主要浏览器的css  hack汇总: 现有css样式为: .class{ color:red; } 判断IE8以上的浏览器才执行的代码/* IE8+ */ .class{ color:red ...

  6. 原来css可以直接覆盖内联style

    今天阅读博文新手如何在gdb中存活时,发现行距太小,阅读起来不舒服. 查看了一下html代码,发现是博文内容中的内联style(line-height: normal)覆盖了博客模板的css引起的. ...

  7. CSS中div覆盖另一个div

    将一个div覆盖在另一个div上有两种手段:一是设置margin为负值,二是设置绝对定位. 可以根个人情况设置z-index的值 1->position 为absolute的情况 <htm ...

  8. css样式被覆盖解决方案

    刚才写zenktodo的时候,通过动态添加class的方式修改一个div的样式,总是不起作用. #navigator { height: 100%; width: 200; position: abs ...

  9. 【知识总结】CSS中样式覆盖优先顺序

    层叠样式类型 类型: 1. 浏览器默认样式 2. 浏览器用户自定义样式 3. 外部样式表 4. 内部样式表 5. 内联样式表 顺序: 浏览器默认样式 < 浏览器用户自定义样式 < 外部样式 ...

随机推荐

  1. 用 Java 实现的八种常用排序算法

    八种排序算法可以按照如图分类 交换排序 所谓交换,就是序列中任意两个元素进行比较,根据比较结果来交换各自在序列中的位置,以此达到排序的目的. 1. 冒泡排序 冒泡排序是一种简单的交换排序算法,以升序排 ...

  2. 三门峡6378.7939(薇)xiaojie:三门峡哪里有xiaomei

    三门峡哪里有小姐服务大保健[微信:6378.7939倩儿小妹[三门峡叫小姐服务√o服务微信:6378.7939倩儿小妹[三门峡叫小姐服务][十微信:6378.7939倩儿小妹][三门峡叫小姐包夜服务] ...

  3. MeteoInfoLab脚本示例:OMI Swath HDF数据

    这个例子读取OMI卫星Swath数据中的CloudFaction变量并绘图.脚本程序: #Add data file folder = 'D:/Temp/hdf/' fns = 'OMI-Aura_L ...

  4. day53 Pyhton 前端04

    内容回顾: 盒子: 内边距:padding,解决内部矛盾,内边距的增加整个盒子也会增加 外边距:margin,解决外部矛盾,当来盒子都有外边距的时候,取两者最大值 边框:border border-c ...

  5. [leetcode] 剑指 Offer 专题(一)

    又开了一个笔记专题的坑,未来一两周希望能把<剑指Offer>的题目刷完

  6. 可变数据类型不能作为python函数的参数

    可变数据类型:列表.字典 不可变数据类型:整型.浮点型.字符串.元组 为什么可变数据类型不能作为python函数的参数?请看以下例子: def foo(a=[]): a.append(1) retur ...

  7. selenium--数据填充

    from time import sleep from selenium import webdriver br = webdriver.Chrome() url = "https://ww ...

  8. js改变,设置table单双行颜色,jquery改变,设置table单双行颜色

    1.js实现单双行以不同颜色显示 $(document).ready(function () { var color = "#ffeab3"; $("#GvList tr ...

  9. selenium中如何保证操作元素的成功率?也就是说如何保证我点击的元素一定是可以点击的?

    1.在寻找元素时,加上显示等待或者隐式等待,这样在对元素进行操作之前保证元素被找到,进而提高成功率: 2.在对元素操作之前,比如click,如果该元素未display(非hidden),就需要先滚动到 ...

  10. STM32入门系列-GPIO工作模式及LED电路原理

    GPIO工作模式 由于GPIO内部的结构关系,决定了GPIO可配置成以下几种模式. 输入模式 在输入模式时,施密特触发器打开,输出被禁止.可通过输入数据寄存器GPIOx_IDR读取I/O状态.输入模式 ...