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 属性. 适应区域内容是指图片的宽或高的长度满足 ...
随机推荐
- 快速部署 Kubeadm 1.13 集群(ETCD)
软件环境清单 kubeadm.x86_64 Version :1.13.1-0 kubelet.x86_64 Version : 1.13-1-0 kubectl.x86_64 Version : ...
- 【RL系列】马尔可夫决策过程——状态价值评价与动作价值评价
请先阅读上两篇文章: [RL系列]马尔可夫决策过程中状态价值函数的一般形式 [RL系列]马尔可夫决策过程与动态编程 状态价值函数,顾名思义,就是用于状态价值评价(SVE)的.典型的问题有“格子世界(G ...
- Datasets
STL-10 https://cs.stanford.edu/~acoates/stl10/ CIFAR-10 and CIFAR-100 https://www.cs.toronto.edu/~kr ...
- 工作小应用:EXCEL查找两列重复数据
工作案例:excel存在A列.B列,需要找出B列没有A列的数据,具体做法如下(以office2007做案例): 1.点击 公式-定义名称 ,选中A列,填写名称“AAA”,选中B列,填写名称“BBB”: ...
- Notes of Daily Scrum Meeting(11.17)
Notes of Daily Scrum Meeting(11.17) 今天是第四周的周一,也就是说距离最后发布也只剩下一周的时间,但我们的工程里面还有很多的问题没有解决,我关注过 其他一两个小组,他 ...
- Daily Scrum 11.18
今日完成任务: 1.在提问问题的时候为问题创建索引 2.解决了修改个人资料后刷新没有更新的问题 3.初步加入了采纳功能(没完善UI设计) 遇到困难:创建索引之后,跳转到主页,需要重新登录,找了半天不知 ...
- Beta Scrum Day 6 — 听说
听说
- Internet History, Technology and Security (Week6)
Week6 The Internet is desinged based on four-layer model. Each layer builds on the layers below it. ...
- P4安装
P4安装篇 ubuntu 14.04为例子 一.首先要fork到自己的github里面 源码目录 https://github.com/p4lang/p4factory 然后fork到自己的githu ...
- ACM的fflush(stdin)的问题
在最近的刷题过程中,因为用到了很多字符串的操作,有时需要多次清空缓冲区,所以用了fflush(stdin);的语句,确实很好用,但是发现在OJ上提交后会出现runtime error的问题.当时并没有 ...