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. 三羊献瑞:next_permutation()

    三羊献瑞 观察下面的加法算式: 祥 瑞 生 辉  +   三 羊 献 瑞-------------------   三 羊 生 瑞 气 (如果有对齐问题,可以参看[图1.jpg]) 其中,相同的汉字代 ...

  2. QT中的小细节

    一 .  QT4和QT5的区别(信号和槽):1.  QT4: connect(button,SIGNAL(pressed()),this,SLOT(close())); /** * 优点 :写法简单 ...

  3. python3.6环境中django2.0与xadmin0.6结合的后台管理

    1.xadmin简介 django的admin管理后台页面很简洁,对个人来说做后台管理非常简单:xadmin的比较admin优化界面,看着也舒服. xadmin界面效果如下: 2.xadmin安装 从 ...

  4. 后端程序员必备的Linux基础知识

    我自己总结的Java学习的系统知识点以及面试问题,目前已经开源,会一直完善下去,欢迎建议和指导欢迎Star: https://github.com/Snailclimb/Java-Guide > ...

  5. css 文字展示两行 其余的省略号显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 第十二周作业_PSP总结报告

    回顾1 (1)回想一下你曾经对计算机专业的畅想 当初你是如何做出选择计算机专业的决定的?经过一个学期,你的看法改变了么,为什么? 你认为过去接触到的课程是否符合你对计算机专业的期待,为什么?经过一个学 ...

  7. WebGL学习笔记四点一

    上一章是对图形的变换,这一章的第一节主要介绍了光栅化的过程,在创建多个颜色的三角形的过程中顶点着点器的过程如下 ,1.首先通过attribute的变量从javascript中获取数据,根据drawAr ...

  8. 一个web项目中间的团队管理

    一个web项目中间的团队管理     最近在参加一个比赛,我们选的题目是:MOOC大型网络在线课堂.这个题目是我们五个人都想做的,我们的成员都是志同道合的五个人.   作为团队的统率者:   定义规范 ...

  9. 第一个spring冲刺第二天

    讨论成员:王俊凯.罗凯杰.王逸辉.马志磊 地点:宿舍 话题:讨论关于安卓的控件的应用和如何调用 选题:四则运算 方向:更加实用的计算器功能,功能更加实用并且简单,没有太多的繁琐操作,可以的话会加上些趣 ...

  10. 阅读<构建之法>第三10、11、12章并提出问题

    <构建之法>第10.11.12章 第10章: 问题:对我们了解了用户的需求后,但是我们想法和做出来的软件会和用户的需求有偏差,比如风格.界面的修饰等等,那么我们程序猿怎样才能让自己的想法更 ...