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 ...
随机推荐
- linux 性能分析
1.系统状态工具:sysstat, 包含很多监控linux系统状态的工具,pidstat 安装方法: sudo apt-get install sysstat 2.性能优化工具: perf 安装方法: ...
- Win2012 R2安装 sqlserver2017 Express
1.在官网下载 安装一直跟着点下一步就好了 到登录验证那步,给sa设置一个密码 2.下载管理工具 SQL Server Management Studio 17 https://docs.micros ...
- Rest API
一.前言 在软件行业快速发展的今天,传统的软件授权已经不能足以满足一个IT类的公司的发展.虽然在大部分公司里,它还是现金池的直接源头.但是在可遇见的未来,受摩尔根理论的失效.物联网的发展等影响,应用的 ...
- CSS div内文字显示两行,超出部分省略号显示
1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...
- mysql-视图、触发器、事务、存储过程、流程控制
目录 视图 触发器 事务 存储过程 流程控制 一.视图 视图是由查询结果构成的一张虚拟表,和真实的表一样,带有名称的列和行数据 强调:视图是永久存储的,但是视图存储的不是数据,只是一条sql语句 视图 ...
- vue-router路由动态传参query和params的区别
1.query方式传参和接收参数 //路由 { path: '/detail', //这里不需要参入参数 name: "detail", component: detail//这个 ...
- Java_File类
File类以抽象的方式代表文件名和目录路径.该类主要用于文件和目录的创建.查找.删除等.先来看一下File的构造方法: // 通过将给定的路径名字符串转换为抽象路径名来创建新的 File实例 File ...
- 04-HTTP协议和静态Web服务器
一.HTTP协议(HyperText Transfer Protocol) 超文本传输协议,超文本是超级文本的缩写,是指超越文本限制或者超链接,比如:图片.音乐.视频.超链接等等都属于超文本. ...
- 末学者笔记--apache编译安装及LAMP架构上线
apache介绍 一.Apache的三种工作模式 Apache一共有3种稳定的MPM模式(多进程处理模块),它们分别是prefork.worker.event.http-2.2版本的httpd默认的m ...
- 末学者笔记--rpm和yum软件管理(Linux)
一.rpm简介 这是一个数据库管理工具,可以通过读取数据库,判断软件是否已经安装,如果已经安装可以读取出来所有文件的所在位置等,并可以实现删除这些文件. rpm:RPM is Redhat Packa ...
