使用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 ...
随机推荐
- (7)C++ 函数2
一.内联函数 通常程序在调用函数时,程序会跳转到另一个地址上,意味着会多花开销.使用内联函数,编译器能够将函数调用替换成函数代码.这样会变得稍快一些 在函数原型的地方使用加了inline的函数定义 # ...
- B2C网站的系统
管理系统 管理系统:主要做业务上的管理和内容输出,常见的有CMS(内容管理系统).CRM.SCM等, 1 供应商作为第三方,有独立开发的系统(SRM)和IO系统对接.以确定订单的状态.当然IO系统里面 ...
- 使用jmeter做接口测试----柠檬不萌!
一.乱码解决方案 1.jmeter查看结果树乱码 (1)在jmeter的bin目录下找到jmeter.properties这个文件,添加上 sampleresult.default.encoding= ...
- 防止重复提交 aspx.net
:服务器控制.后台生成一个token,存入session或者其他缓存里面.渲染表单时,给form一个隐藏的token(令牌).用户提交表单时:先判断表单里面的token是否存在,不存在拒绝接受此数据: ...
- Windows7下移植Qt4.8.4项目到QT5.2上时遇到的一些问题
最近在Windows7下将Qt4.8.4+MSVC2008的项目移植到QT5.2下时,遇到了一些小问题: 问题一:错误:C1083: 无法打开包括文件:"QApplication&q ...
- java部署:CentOS 7下Tomcat安装与配置教程(Tomcat开机启动)
一.前言 1.本教程主要内容 Tomcat安装与基础配置 Tomcat开机启动配置 2.本教程适用范围与环境信息 适用范围 软件/工具 版本说明 CentOS CentOS 7 Tomcat Tomc ...
- linux Cron 定时任务(centos 7.2 测试可用)
1.Cron(学习笔记) 计划任务,是任务在约定的时间执行已经计划好的工作. 格式如下 Seconds Minutes Hours DayofMonth Month DayofWeek Year ...
- Java Socket NIO示例总结
Java NIO是非阻塞IO的实现,基于事件驱动,非常适用于服务器需要维持大量连接,但是数据交换量不大的情况,例如一些即时通信的服务等等,它主要有三个部分组成: Channels Buffers Se ...
- Codeforces 1166F 并查集 启发式合并
题意:给你一张无向图,无向图中每条边有颜色.有两种操作,一种是询问从x到y是否有双彩虹路,一种是在x到y之间添加一条颜色为z的边.双彩虹路是指:如果给这条路径的点编号,那么第i个点和第i - 1个点相 ...
- 头文件 <sys/un.h>
struct sockaddr_un server_sockaddr ; struct sockaddr_un cli_sockaddr ;