文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/

原文链接:http://www.zhangxinxu.com/wordpress/?p=2547
原文摘要:

.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
												

【转载】使用CSS将图片转换成黑白(灰色、置灰)的更多相关文章

  1. 使用CSS将图片转换成黑白(灰色、置灰)z转

    小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...

  2. 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]

        小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...

  3. js使用CSS将图片转换成黑白(灰色、置灰)

    详细内容请点击 可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的. 不过,时代发展,如今,CSS3的逐步推进,我们也开始 ...

  4. [转] 小tip: 使用CSS将图片转换成黑白(灰色、置灰) ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2547 //zxx: ...

  5. 小tip: 使用CSS将图片转换成黑白(灰色、置灰)

    可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的.不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大 ...

  6. 使用CSS将图片转换成黑白(灰色、置灰) & 毛玻璃效果

    法1⃣️: IE浏览器: filter: gray; 其他浏览器: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(10 ...

  7. [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...

  8. 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果

    去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...

  9. ABBYY如何把图片转换成pdf格式

    在制作工作文件的时候,有时候会遇到需要进行文件格式转换的情况,比较常见的文件格式转换就包含了Office与pdf格式之间的转换.但除此之外,图片与pdf格式也是可以进行转换的,那么图片要怎么操作,才能 ...

随机推荐

  1. Socket通信中AF_INET 和 AF_UNIX域的区别

    转载:http://blog.csdn.net/sandware/article/details/40923491 1.  AF_INET域socket通信过程 典型的TCP/IP四层模型的通信过程. ...

  2. 个人作业3——个人总结(Alpha阶段)

    个人总结 在Alpha冲刺阶段中,我们团队基本完成了项目的大致基础框架,还有很多不足需要更多的时间来让我们做得更好. 对我个人而言,Alpha冲刺阶段是一个强度很大的阶段,每天都在吸收新的知识,团队也 ...

  3. Java中继承与多态

    Java类的继承继承的语法结构:    [修饰符列表] class 子类名 extends 父类名{        类体;    }子类就是当前这个类,父类就是我们要复用的那个类java中只支持单继承 ...

  4. 团队作业4——第一次项目冲刺(Alpha版本)5th day

    一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 计时模式已经大致完成了 接下来是记录成绩的部分 四.困难与问题 1.新语言的学习与适应较慢,整体的开发进展达不到预期效果, 2 ...

  5. 201521123019 《Java程序设计》第8周学习总结

    1. 本章学习总结 2. 书面作业 一.List中指定元素的删除(题目4-1) for (int i = list.size()-1; i >=0; i--) {//从最后一个元素开始删除 if ...

  6. 201521123115 《Java程序设计》第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  7. 201521123027 <java程序设计>第11周学习总结

    1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2.书面作业 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchro ...

  8. 201521123039 《java程序设计》第一周学习总结

    #1.本章学习总结 Java是面向对象的程序语言,它一切定义都是对象.我们所编写的Java程序经过编译后生成了*.class的文件,再经过JVM对*.class解释运行就可以得到Java程序,所以Ja ...

  9. [10] 过滤器 Filter

    1.过滤器的基本概念和作用 在网站的页面访问时,我们往往需要做一些控制,如普通用户无法访问VIP用户的页面.如果在每一个需要访问控制的文件中都加上判断代码,那么代码将会很冗余,一旦需要统一修改时也极其 ...

  10. [07] ServletContext上下文对象

    1.上下文的概念 我们在说到Servlet的继承关系时,提到自定义Servlet实际上间接实现了Servlet和ServletConfig两个接口,其中ServletConfig接口中定义了一个方法叫 ...