法1⃣️:

IE浏览器: filter: gray;

其他浏览器:

.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}

法2⃣️: 通过 Greyscale.js

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>

grayscale(document.getElementById("thisImage"));

或者 grayscale($("#thisImage"));

毛玻璃效果:blur


.gray {
opacity: 0.7;
-webkit-filter: grayscale(100%) blur(5px); /* Chrome, Opera */
-moz-filter: grayscale(100%) blur(5px);
-ms-filter: grayscale(100%) blur(5px);
filter: grayscale(100%) blur(5px);
}

使用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. [转] 小tip: 使用CSS将图片转换成黑白(灰色、置灰) ---张鑫旭

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

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

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

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

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

  6. 【转载】使用CSS将图片转换成黑白(灰色、置灰)

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=2547原文摘要: . ...

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

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

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

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

  9. [转]C#将image中的显示的图片转换成二进制

    本文转自:http://www.cnblogs.com/shuang121/archive/2012/07/09/2582654.html .将Image图像文件存入到数据库中 我们知道数据库里的Im ...

随机推荐

  1. (7)C++ 函数2

    一.内联函数 通常程序在调用函数时,程序会跳转到另一个地址上,意味着会多花开销.使用内联函数,编译器能够将函数调用替换成函数代码.这样会变得稍快一些 在函数原型的地方使用加了inline的函数定义 # ...

  2. B2C网站的系统

    管理系统 管理系统:主要做业务上的管理和内容输出,常见的有CMS(内容管理系统).CRM.SCM等, 1 供应商作为第三方,有独立开发的系统(SRM)和IO系统对接.以确定订单的状态.当然IO系统里面 ...

  3. 使用jmeter做接口测试----柠檬不萌!

    一.乱码解决方案 1.jmeter查看结果树乱码 (1)在jmeter的bin目录下找到jmeter.properties这个文件,添加上 sampleresult.default.encoding= ...

  4. 防止重复提交 aspx.net

    :服务器控制.后台生成一个token,存入session或者其他缓存里面.渲染表单时,给form一个隐藏的token(令牌).用户提交表单时:先判断表单里面的token是否存在,不存在拒绝接受此数据: ...

  5. Windows7下移植Qt4.8.4项目到QT5.2上时遇到的一些问题

        最近在Windows7下将Qt4.8.4+MSVC2008的项目移植到QT5.2下时,遇到了一些小问题: 问题一:错误:C1083: 无法打开包括文件:"QApplication&q ...

  6. java部署:CentOS 7下Tomcat安装与配置教程(Tomcat开机启动)

    一.前言 1.本教程主要内容 Tomcat安装与基础配置 Tomcat开机启动配置 2.本教程适用范围与环境信息 适用范围 软件/工具 版本说明 CentOS CentOS 7 Tomcat Tomc ...

  7. linux Cron 定时任务(centos 7.2 测试可用)

    1.Cron(学习笔记) 计划任务,是任务在约定的时间执行已经计划好的工作. 格式如下 Seconds Minutes Hours DayofMonth Month DayofWeek Year    ...

  8. Java Socket NIO示例总结

    Java NIO是非阻塞IO的实现,基于事件驱动,非常适用于服务器需要维持大量连接,但是数据交换量不大的情况,例如一些即时通信的服务等等,它主要有三个部分组成: Channels Buffers Se ...

  9. Codeforces 1166F 并查集 启发式合并

    题意:给你一张无向图,无向图中每条边有颜色.有两种操作,一种是询问从x到y是否有双彩虹路,一种是在x到y之间添加一条颜色为z的边.双彩虹路是指:如果给这条路径的点编号,那么第i个点和第i - 1个点相 ...

  10. 头文件 <sys/un.h>

    struct sockaddr_un server_sockaddr ; struct sockaddr_un cli_sockaddr ;