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使图片变黑白实例页面的更多相关文章

  1. CSS3 grayscale滤镜+SVG使图片变黑白实例页面

    CSS代码: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale( ...

  2. CSS3 grayscale滤镜图片变黑白实例页面

    在网站加入友情链接的LOGO时,因为不同logo颜色的问题,和主题色调可能产生冲突, 我选择用CSS3滤镜让logo变黑白,hover时变回原本的彩色 CSS代码: .gray { -webkit-f ...

  3. CSS使图片变灰

    为了悼念,各大网站都纷纷将自己的站点颜色调灰,就连图片也一样,到底如何实现的呢,请看下面的代码. 〈img src="http://hovertree.com/hvtimg/201512/f ...

  4. css使图片变成黑白效果

    -webkit-filter: grayscale(%); -moz-filter: grayscale(%); -ms-filter: grayscale(%); -o-filter: graysc ...

  5. CSS3 grayscale滤镜图片变黑白

    1. 使整个页面的图片都变成灰色的,代码如下. html{     font-size: 100%;     -webkit-text-size-adjust: none;    -ms-text-s ...

  6. css3 图片变黑白 filter

    /*图片黑白*/ .img-gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: gray ...

  7. java 让图片变黑白

    import java.awt.Image;import java.awt.color.ColorSpace;import java.awt.image.BufferedImage;import ja ...

  8. css有关鼠标移动上去图片变透明度变化

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. css 使图片水平垂直居中

    1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...

随机推荐

  1. 软件测试-Svn服务器搭建全过程-基于Centos6.7-64bit

    本文详细介绍了在CentOs6.7-64bit服务器上搭建SVN版本控制服务 工具准备 CentOs6.7-64bit操作系统:关闭linux防火墙:设置定固IP--DHCP(动态):安装系统过程中开 ...

  2. JavaWeb之html

    html :Hyper Text Markup Language 超文本标记语言 超文本:比文本功能更加强大 标记语言:通过一组标签对内容进行描述的一门语言 html书写规则: 文件的后缀名:.htm ...

  3. Pycharm问题:module 'pip' has no attribute 'main'

    更新pip之后(pip 10 版本之后),Pycharm安装package出现报错:module 'pip' has no attribute 'main' 解决办法如下: 找到Pycharm安装目录 ...

  4. (转)Java语法----Java中equals和==的区别

    转载地址:https://www.cnblogs.com/smyhvae/p/3929585.html 一.java当中的数据类型和“==”的含义: 基本数据类型(也称原始数据类型) :byte,sh ...

  5. Http协议入门、响应与请求行、HttpServletRequest对象的使用、请求参数获取和编码问题

    1 课程回顾 web入门 1)web服务软件作用: 把本地资源共享给外部访问 2)tomcat服务器基本操作 : 启动:  %tomcat%/bin/startup.bat 关闭: %tomcat%/ ...

  6. SecuerCRT遇到一个致命错误且必须关闭_解决方案_软件链接(自己百度云盘的)

    问题描述: 1.以前安装过SecureCRT,现在出现问题,手工卸载不完全,导致新安装的SecureCRT一直提示:以下错误. 2.出现的错误: 3.解决方案: 1)删除,上图路径中VanDyke文件 ...

  7. [转载 java 技术栈] eclipse 阅读跟踪 Java 源码的几个小技巧!

    本文基于Eclipse IDE,我们每天都使用的IDE其实提供了很多强大的功能,掌握它们,往往能够事半功倍. 1.Quick Type Hierarchy 快速查看类继承体系. 快捷键:Ctrl + ...

  8. linux安装lamp环境(linux+apache+mysql+php)

    源码安装 本次使用 Centos7.2 MySQL5.7.22 Apache2.4.37 PHP5.6.38 安装Apache 安装httpd和所需依赖:gcc, apr, apr-util,apr- ...

  9. <转>Go语言TCP Socket编程

    授权转载: Tony Bai 原文连接: https://tonybai.com/2015/11/17/tcp-programming-in-golang/ Golang的主要 设计目标之一就是面向大 ...

  10. 记一次WordPress 安装的过程

    安装WordPress你我他大家都会,记得10年的时候,哥已经玩转WordPress.dedecms.sns,那为何现在要记一次WordPress安装过程呢? 因为现在不会了! 之前安装都是在Wind ...