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 属性. 适应区域内容是指图片的宽或高的长度满足 ...
随机推荐
- Xavier——Understanding the difficulty of training deep feedforward neural networks
1. 摘要 本文尝试解释为什么在深度的神经网络中随机初始化会让梯度下降表现很差,并且在此基础上来帮助设计更好的算法. 作者发现 sigmoid 函数不适合深度网络,在这种情况下,随机初始化参数会让较深 ...
- c++ 使用this指针进行串联的函数调用
如代码所示,在每个成员函数函数体最后返回*this.即可实现串联调用. class Time { public: Time(, , ); Time &setHour(int); Time &a ...
- 1、Ansible安装配置
ansible介绍: Ansible是一款基于Python开发的自动化运维工具,主要是实现批量系统配置.批量程序部署.批量运行命令.批量执行任务等等诸多功能.Ansible是一款灵活的开源工具,能够很 ...
- 简单安装与使用虚拟环境virtualenv
安装虚拟环境的命令如下: sudo pip install virtualenv sudo pip install virtualenvwrapper 创建虚拟环境的命令如下: mkvirtualen ...
- 获400 万美元 A 轮融资,ShipBob 想帮助小微企业享受Amazon Prime 级配送服务 2016-06-18
Weiss认为,无论零售市场的发展走向如何波动,ShipBob公司都能够获得坚实的成长表现. 在线销售实体商品的小型企业当然希望利用种种方式取悦客户,但面对着Amazon Prime迅如闪电且价格实惠 ...
- Python基础_可迭代的/迭代器/生成器
介绍 可迭代的:内部实现了__iter__方法 迭代器:内部实现了__iter__,__next__方法 生成器:yield,yield from 使用 __iter__() __next__() _ ...
- fiddler常识汇总
Fiddler 抓包工具总结 名称 含义 # 抓取HTTP Request的顺序,从1开始,以此递增 Result HTTP状态码 Protocol 请求使用的协议,如HTTP/HTTPS/FTP ...
- 王者荣耀交流协会final发布第四次scrum例会
1.例会照片 成员高远博,冉华,王磊,王玉玲,任思佳,袁玥,王磊,王超同学因参加比赛不在学校,不能出席. master:王玉玲 2.时间跨度 2017年12月4日 18:00 — 18:18,总计18 ...
- Daily Srum 10.21
到目前为止,我们组处在学习阶段,很多知识点都还不太清楚,所以现在我们还在看相关书籍和博客,任务. 而我们此间主要是在阅读一些材料: 陈谋一直在看学长的代码,其中C#的很多方式我都不太明白(尽管和Jav ...
- fcn模型训练及测试
1.模型下载 1)下载新版caffe: https://github.com/BVLC/caffe 2)下载fcn代码: https://github.com/shelhamer/fcn.berkel ...