法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. bash arithmatic

    Arithmetic in bash is done with $ and double parentheses: echo "$(($num1+$num2))" Or $ and ...

  2. POJ 1789 Truck History (Kruskal)

    题目链接:POJ 1789 Description Advanced Cargo Movement, Ltd. uses trucks of different types. Some trucks ...

  3. 8.Jmeter 快速入门教程 -- 如何使测试脚本更强大

    添加基本的elements例如Sampler 或者一些监听器,就可以完成基本的测试.但有时需要更复杂的测试场景,所以还有更多其他的元素.清看下表,了解各种单元组的用途.  可添加的单元组  用途 Sa ...

  4. 安装项目依赖pipreqs并生成requirements.txt

    安装项目依赖:sudo pip3 install pipreqs 生成依赖文件(requirements.txt):pipreqs ./   # 进入项目目录,在项目文件夹里生成安装依赖文件里的环境: ...

  5. yum update过程中失败后再次执行出现“xxxx is a duplicate with xxxx”问题

    问题现象: 解决办法: 利用yum-uitls中的工具package-cleanup指令,使用方法见下图,具体可通过man package-cleanup查询 列出重复的rpm包        pac ...

  6. java入门之:Hello World

    import java.util.Scanner; public class HelloWorld{ public static void main(String[] args){ //向终端打印he ...

  7. android service 样例(电话录音和获取系统当前时间)

    关于android service 的具体解释请參考: android四大组件--android service具体解释.以下将用两个实例具体呈现Android Service的两种实现. 一个是st ...

  8. c# DataTable第二行改为各列标题字段

    DataTable dt = ExcelHelper.ToDataTable(fileinfo.FilePath); //将datatable的第二行变为列标题字段 DataTable dt2 = n ...

  9. python中关于is,=和==的区别

    在Python中 '='相当于赋值 '=='相当于等号两边的值相同 is则是表示两边的id,也就是内存地址相同

  10. 单实例安装elastic和启动报错解决

    下载 先到官网https://www.elastic.co/cn/downloads/past-releases/elasticsearch-5-5-2下载,我安装的是5.5.2的版本,其他版本直接访 ...