法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. mybatis中Parameter index out of range (2 > number of parameters, which is 1).

    ${name} 是不带单引号的,而#{name} 是带单引号的

  2. LightOJ 1248 Dice (III) (期望DP / 几何分布)

    题目链接:LightOJ - 1248 Description Given a dice with n sides, you have to find the expected number of t ...

  3. 高博SLAM14讲 ch5 点云拼接例程实现与bug处理

    一.环境配置,基本库的安装 1.Eigen库 apt-get 安装 2.sophus库 apt-get 安装 3.pcl 点云库 (1)官方预编译版本 sudo apt-get install lib ...

  4. Python List列表的操作说明

    Python中List的N种操作,其简单程度令人叹为观止... C:\Users\rhys>python Python 2.7.14 (v2.7.14:84471935ed, Sep 16 20 ...

  5. Findwind() Enumwindow()

    1. FindWindow() HWND FindWindow(LPCSTR lpClassName, LPCSTR lpWindowName); 功能:查找与指定窗口类名和窗口名称相匹配的顶级窗口, ...

  6. Cocos2d-x之项目结构分析

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 1.下面是我们创建cocos2d的工程MyGame01里的文件资源 2. 在下面:文件解决方案下面有6个项目,我们的启动优先项为MyGam ...

  7. 三、函数 (SUM、MIN、MAX、COUNT、AVG)

    第八章 使用数据处理函数 8.1 函数 SQL支持利用函数来处理数据.函数一般是在数据上执行的,给数据的转换和处理提供了方便. 每一个DBMS都有特定的函数.只有少数几个函数被所有主要的DBMS等同的 ...

  8. 对 HTTP HTTPS的认识

    1.HTTP:超文本传输协议 -以明文的形式传输 -效率更高,但是不安全 2.HTTPS:HTTP+SSL -传输之前数据先加密,之后在揭秘 -效率低,但是安全 3.get请求和post请求的区别 - ...

  9. python学习之路,2018.8.9

    python学习之路,2018.8.9, 学习是一个长期坚持的过程,加油吧,少年!

  10. [轉]Reverse a singly linked list

    Reverse a singly linked list  http://angelonotes.blogspot.tw/2011/08/reverse-singly-linked-list.html ...