CSS3 grayscale滤镜+SVG使图片变黑白实例页面
CSS代码:
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(gray.svg#grayscale);
filter: gray;
}
HTML代码:
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
<img src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" class="gray" />
SVG代码:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
CSS3 grayscale滤镜+SVG使图片变黑白实例页面的更多相关文章
- CSS grayscale滤镜+SVG使图片变黑白实例页面
http:/CSS 地址:/www.runoob.com/cssref/css3-pr-filter.html CSS代码: .gray { -webkit-filter: grayscale(%); ...
- CSS3 grayscale滤镜图片变黑白实例页面
在网站加入友情链接的LOGO时,因为不同logo颜色的问题,和主题色调可能产生冲突, 我选择用CSS3滤镜让logo变黑白,hover时变回原本的彩色 CSS代码: .gray { -webkit-f ...
- CSS使图片变灰
为了悼念,各大网站都纷纷将自己的站点颜色调灰,就连图片也一样,到底如何实现的呢,请看下面的代码. 〈img src="http://hovertree.com/hvtimg/201512/f ...
- css使图片变成黑白效果
-webkit-filter: grayscale(%); -moz-filter: grayscale(%); -ms-filter: grayscale(%); -o-filter: graysc ...
- CSS3 grayscale滤镜图片变黑白
1. 使整个页面的图片都变成灰色的,代码如下. html{ font-size: 100%; -webkit-text-size-adjust: none; -ms-text-s ...
- css3 图片变黑白 filter
/*图片黑白*/ .img-gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: gray ...
- java 让图片变黑白
import java.awt.Image;import java.awt.color.ColorSpace;import java.awt.image.BufferedImage;import ja ...
- CSS3实现鼠标移动到图片上图片变大
CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义 <!DOCTYPE html><html> <head&g ...
- HTML5 viewport 标签与 CSS3 background-size 属性 使图片完全适应区域内容
要使一张图片不论在移动端还是在桌面端都能适应区域内容,可以使用 HTML5 的 viewport 标签结合 CSS3 的 background-size 属性. 适应区域内容是指图片的宽或高的长度满足 ...
随机推荐
- PropertyGrid中的枚举显示为中文
参考http://www.cnblogs.com/yank/archive/2011/09/17/2179598.html 在上述文档的基础上做了改进.从EnumConverter类派生 显示效果: ...
- nodejs 服务器实现区分多客户端请求服务
初始实现 var net = require('net');//1 引入net模块 var chatServer = net.createServer();//创建net服务器 var clientL ...
- 原生JavaScript实现的贪吃蛇
github代码地址:https://github.com/McRayFE/snake 涉及到的知识点: 键盘事件 setInterval()定时器 javascript中数组的使用 碰撞的检测 of ...
- static 继承
静态方法大家应该都比较熟悉,在这里主要谈一下静态方法在继承时的一些注意事项. 1.父类方法如果是静态方法,子类不能覆盖为非静态方法: 2.父类方法如果是非静态方法,子类不能覆盖为静态方法: 3.父类静 ...
- mysql密码忘记解决方案
方法:在忘记root密码的时候,可以这样 以windows为例: 1. 关闭正在运行的MySQL服务. 2. 打开DOS窗口,转到mysql\bin目录. 3. 输入mysqld --skip-gra ...
- python learning Functional Programming.py
print(abs(-10)) # 函数可以是变量 f = abs f(-10) def add(x,y,f): return f(x) + f(y) x = -5 y = 6 f = abs # 简 ...
- Java程序设计实践
先放上需求同时也是作业的地址:http://www.cnblogs.com/xinz/p/7417960.html 这是我第一次接触一个完整的项目的开发,在这里分享一下整个项目(或者作业?)的设计过程 ...
- 信安实践——CSRF攻击与防御
1.实验原理 CSRF(Cross-Site Request Forgery,跨站点伪造请求)是一种网络攻击方式,该攻击可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击站点,从而在未授权的 ...
- Java分布式应用
分布式计算就是通过计算机网络将计算工作分布到多台主机上,多个主机一起协同完成工作. 我试着列一下相关知识吧. 网络通讯,网络是分布式的基础,对分布式的理解建立在对网络的理解上,包括: OSI模型的7层 ...
- DRBD 实验
跨主机的块设备镜像系统,工作在内核中完成 drbd工作原理:客户端发起一个写操作的系统调用给文件系统,写请求再到达内核缓冲区,最到达DRBD模块,此时drbd会复制写入磁盘的数据,且进行两步操作,第一 ...