使用CSS将图片转换成黑白(灰色、置灰) & 毛玻璃效果
法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将图片转换成黑白(灰色、置灰) & 毛玻璃效果的更多相关文章
- 使用CSS将图片转换成黑白(灰色、置灰)z转
小tip: 使用CSS将图片转换成黑白(灰色.置灰) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...
- 小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]
小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 ...
- [转] 小tip: 使用CSS将图片转换成黑白(灰色、置灰) ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2547 //zxx: ...
- 小tip: 使用CSS将图片转换成黑白(灰色、置灰)
可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的.不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大 ...
- js使用CSS将图片转换成黑白(灰色、置灰)
详细内容请点击 可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的. 不过,时代发展,如今,CSS3的逐步推进,我们也开始 ...
- 【转载】使用CSS将图片转换成黑白(灰色、置灰)
文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=2547原文摘要: . ...
- 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果
去年盛夏之时,曾写过“小tip: 使用CSS将图片转换成黑白”一文,本文的模式以及内容其实走得是类似路线.CSS3 → SVG → IE filter → canvas. 前段时间,iOS7不是瓜未熟 ...
- [转] 小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 ---张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=3804 去年盛夏之时, ...
- [转]C#将image中的显示的图片转换成二进制
本文转自:http://www.cnblogs.com/shuang121/archive/2012/07/09/2582654.html .将Image图像文件存入到数据库中 我们知道数据库里的Im ...
随机推荐
- Autofac框架详解 转载https://www.cnblogs.com/lenmom/p/9081658.html
一.组件 创建出来的对象需要从组件中来获取,组件的创建有如下4种(延续第一篇的Demo,仅仅变动所贴出的代码)方式: 1.类型创建RegisterType AutoFac能够通过反射检查一个类型,选择 ...
- Sap Netweaver命令执行
URL/ctc/servlet/com.sap.ctc.util.ConfigServlet?param=com.sap.ctc.util.FileSystemConfig;EXECUTE_CMD;C ...
- linux kill命令
代码 elif [ "$SIGNAL" = 'reload' ]; then kill -USR1 $PID 总结:kill -9 pid 等同于kill -USR9 pid 等同 ...
- Scrapy框架: 第一个程序
首先创建项目: scrappy start project maitian 第二步: 明确要抓取的字段items.py import scrapy class MaitianItem(scrapy.I ...
- bzoj4544 椭圆上的整点
我会所有推理..... Q1:真的这么暴力的统计答案? Q2:蜜汁统计答案.... Q3:为什么不考虑3在不同的位置的情况
- CentOS 7 安装详细步骤
VMware安装centos 7 前期准备: 1. VMware虚拟机软件(使用的是15x) 2. CentOS-7-x86_64-DVD-1810.iso 一.安装VMware虚拟机软件 略 二.新 ...
- 总结下awk基本用法
命令格式: awk '{commands} [{other commands}]' awk 'condition{commands} [{other commands}]' 如:awk '$4==&q ...
- java中String类的面试题大全含答案
1.下面程序的运行结果是()(选择一项)String str1="hello";String str2=new String("hello");System.o ...
- 在Eclipse上安装Spring Tool Suite
. 不装IDE会没有Spring bean configure file Spring Tool Suite是一个基于Eclipse IDE开发环境中的用于开发Spring应用程序的工具,提供了开箱即 ...
- mysql通过表空间来恢复或者传递数据
mysql的备份工具通常有 mysqldump ,mysqlpump(5.7后新特性)等备份工具,这里我们可以尝试使用表空间进行传递 方式是:拷贝数据文件+拷贝表空间 对应innodb引擎就是 i ...