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

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

    http:/CSS 地址:/www.runoob.com/cssref/css3-pr-filter.html CSS代码: .gray { -webkit-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. CSS3实现鼠标移动到图片上图片变大

    CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义 <!DOCTYPE html><html> <head&g ...

  9. HTML5 viewport 标签与 CSS3 background-size 属性 使图片完全适应区域内容

    要使一张图片不论在移动端还是在桌面端都能适应区域内容,可以使用 HTML5 的 viewport 标签结合 CSS3 的 background-size 属性. 适应区域内容是指图片的宽或高的长度满足 ...

随机推荐

  1. 基本数据结构 -- 栈简介(C语言实现)

    栈是一种后进先出的线性表,是最基本的一种数据结构,在许多地方都有应用. 一.什么是栈 栈是限制插入和删除只能在一个位置上进行的线性表.其中,允许插入和删除的一端位于表的末端,叫做栈顶(top),不允许 ...

  2. SQL中读取Excel 以及 bpc语言

    --开启导入功能 reconfigure reconfigure --允许在进程中使用ACE.OLEDB.12 --允许动态参数 EXEC master.dbo.sp_MSset_oledb_prop ...

  3. 微信小程序开发调试技巧

    1.  查看线上小程序console a.  先打开开发小程序console b.  再打开线上小程序,此时可以查看console

  4. How to submit a package to PyPI

    How to submit a package to PyPI The other month a coworker of mine wanted to distribute a small wrap ...

  5. sprint3(第一天)

    1.今天计划了sprint3要做的内容: 整合前台和后台,然后发布让用户使用,然后给我们反馈再进行改进 2.backlog表格: ID Name Est How to demo 1 实现用户登录与权限 ...

  6. YQCB冲刺周第五天

    站立会议: 任务看板: 今天的任务为依旧为将用户记录的数据添加到数据库中,以及金额球的设置. 遇到的问题为金额球在jsp页面的显示.

  7. Linux里的2>&1的理解

    转载自:https://blog.csdn.net/ggxiaobai/article/details/53507530 我们在Linux下经常会碰到nohup command>/dev/nul ...

  8. java中static使用之静态方法注意点

    1.静态方法可以直接调用同类中的静态成员,但是不能直接调用非静态成员,这是为什么呢?大家想一下,静态成员在对象创建之前就要写入内存,所以它在内存中是实实在在的存在的,而非静态还不存在内存中,所以不能调 ...

  9. ztree 使用心得

    最近项目需要用ztree ,初步研究感觉这个插件写的实在是太好了.现总结遇到的问题 封装一颗树 /** * 按类型分组树 * Id 按类型分组ID * treeId 树ID * treeDivId d ...

  10. LeetCode题解:(139) Word Break

    题目说明 Given a non-empty string s and a dictionary wordDict containing a list of non-empty words, dete ...