CSS grayscale滤镜+SVG使图片变黑白实例页面
http:/CSS 地址:/www.runoob.com/cssref/css3-pr-filter.html
CSS代码:
.gray {
-webkit-filter: grayscale(%);
-moz-filter: grayscale(%);
-ms-filter: grayscale(%);
-o-filter: grayscale(%);
filter: grayscale(%);
filter: url(gray.svg#grayscale); filter: gray;
}
HTML代码:
<img src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
<img src="//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>
CSS grayscale滤镜+SVG使图片变黑白实例页面的更多相关文章
- CSS3 grayscale滤镜+SVG使图片变黑白实例页面
CSS代码: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-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 ...
- css有关鼠标移动上去图片变透明度变化
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css 使图片水平垂直居中
1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...
随机推荐
- slim.arg_scope中python技巧
slim.arg_scope函数说明如下: Stores the default arguments for the given set of list_ops. For usage, please ...
- 20164305 徐广皓 Exp3 免杀原理与实践
免杀原理及基础问题回答 实验内容 任务一:正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己利用shellcode编程等免杀工具或技巧 使用msf编码器生 ...
- VS发布网站时,报错提示:“未能将文件xxx复制到xxx,未能找到文件xx”三种解决方案!
发布网站时候大家可能会遇到这样的情况,就是报错提示说:“未能将文件xxx复制到xxx,未能找到文件xx”,这个问题一般来说有三种解决方案,个人倾向第三种,如图: 解决方案如下: 方案一.把系统提示缺失 ...
- CentOS 7下安装vertica记录
CentOS 7下安装vertica记录 1. 安装好centeros 并更新 Centeros安装就不说了,安装完之后联网环境下 yum update.更新下,使得那些包都是新的.(要想用中文 ...
- linux文件常用命令
文件管理不外乎文件或目录的创建.删除.查询.移动,有mkdir/rm/mv 2.1. 创建和删除 创建:mkdir 删除:rm 删除非空目录:rm -rf file目录 删除日志 rm *log (等 ...
- 20165221 《网络对抗技术》EXP2:后门原理与实践
20165221 <网络对抗技术>EXP2:后门原理与实践 实验任务 任务一:使用netcat获取主机操作Shell,cron启动 (0.5分) 任务二:使用socat获取主机操作Shel ...
- centos7 搭建jenkins服务器
具体可参考:https://blog.csdn.net/it_lihongmin/article/details/80814384 注意: 1. 修改主目录:默认是/var/lib/jenkins, ...
- python使用正则解析网络地址的各个部分
参考文章: https://www.cnblogs.com/ingd/p/6182571.htmlimport re def resolveAddress(url): ""&quo ...
- 中位数——二维坐标下的中位数lightoj1349
第一次碰到这种题,不知所措,题解链接 => https://www.cnblogs.com/fu3638/p/7426074.html #include<bits/stdc++.h> ...
- CentOS运维常用技能
1.添加系统帐号 [root@localhost ~]# adduser gordon [root@localhost ~]# passwd gordon //新帐号添加密码,然后输入密码就完成了.修 ...
