法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. JavaScript中 函数的创建和调用

    基础概念:定义函数的方式   一般定义函数有两种方式:    1:函数的声明    2:函数表达式 参考资料:https://blog.csdn.net/xixiruyiruyi/article/de ...

  2. 洛谷 P3455 [POI2007]ZAP-Queries (莫比乌斯函数)

    题目链接:P3455 [POI2007]ZAP-Queries 题意 给定 \(a,b,d\),求 \(\sum_{x=1}^{a} \sum_{y=1}^{b}[gcd(x, y) = d]\). ...

  3. Mysql 主从同步(转载)

    第一步: 在master上创建用于同步的用户 GRANT FILE,REPLICATION SLAVE,REPLICATION CLIENT,SUPER ON *.* TObackup@'192.16 ...

  4. neo4j APOC与自定义存储过程环境搭建

    neo4j APOC与自定义存储过程环境搭建 主要参考资料:APOC官网https://neo4j-contrib.github.io/neo4j-apoc-procedures/APOC介绍 PPT ...

  5. 如何在web项目中配置Spring的Ioc容器

    在web项目中配置Spring的Ioc容器其实就是创建web应用的上下文(WebApplicationContext) 自定义要使用的IoC容器而不使用默认的XmlApplicationContext ...

  6. css3 新特性(动画)

    1. 制作动画 先定义动画,再使用(调用)动画 使用 keyframes(关键帧)定义动画(类似定义类选择器) @keyframes 动画名称{ 0%{ width:100px; } 100%{ wi ...

  7. SecureCRT无法删除和退格的解决办法

    一   选项中,设置自动保存 二   选项=>会话选项 选择linux终端.然后在映射键中,选择delete 等映射信息

  8. 同域SQL server 做镜像服务器遇到1418错误

    今天遇到了如题所说的错误,查了一天没有看到好的解决方案,因为作者是小白,所以对于解决方案都是代码的那种,完全理解不了. 现在,讲述一下我的解决方法.因为是同域的服务器,这个时候说网络访问不了对方,但是 ...

  9. python os模块用法

    import os   #os主要做路径管理import glob  #glob主要做搜索查询匹配import sys inputpath = r"C:\Users\Administrato ...

  10. 在三台服务器,搭建redis三主三从集群

    一.资源准备 1.准备三台服务器H1.H2.H3 172.26.237.83 H1 172.26.237.84 H2 172.26.237.85 H3 二.配置服务器 1.在H1服务器设置SSH免密登 ...