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. 如何利用京东云的对象存储(OSS)上传下载文件

    作者:刘冀 在公有云厂商里都有对象存储,京东云也不例外,而且也兼容S3的标准因此可以利用相关的工具去上传下载文件,本文主要记录一下利用CloudBerry Explorer for Amazon S3 ...

  2. 基于Python的信用评分卡模型分析(一)

    信用风险计量体系包括主体评级模型和债项评级两部分.主体评级和债项评级均有一系列评级模型组成,其中主体评级模型可用“四张卡”来表示,分别是A卡.B卡.C卡和F卡:债项评级模型通常按照主体的融资用途,分为 ...

  3. 学习笔记 | Set

    目录 Set Set 前言 不会数据结构选手 当几乎没写过什么数据结构的菜鸡遇上了毒瘤的splay和treap 时间正一点一点地被续走TAT 听说set有时候可以替代treap和splay 那么菜鸡L ...

  4. nodejs 中 module.exports 和 exports 的区别

    1. module应该是require方法中,上下文中的对象 2. exports对象应该是上下文中引用module.exports的新对象 3. exports.a = xxx 会将修改更新到mod ...

  5. 封装js插件学习指南

    封装js插件学习指南 1.原生JavaScript插件编写指南 => 传送门 2.如何定义一个高逼格的原生JS插件 =>传送门 3.手把手教你用原生JavaScript造轮子 =>  ...

  6. Daily Scrum1 11.3

    今天是我们团队进入代码实现阶段的第一天,经过一周对上一届项目代码的阅读和研究,队员们已经从代码中分析出我们这次项目将要修改和补充的地方,我们接下来要做的地方就是在两周的时间内将团队项目在alpha阶段 ...

  7. POJ 3597 Polygon Division 多边形剖分

    题目链接: http://poj.org/problem?id=3597 Polygon Division Time Limit: 2000MSMemory Limit: 131072K 问题描述 G ...

  8. C/C++ 打印文件名、行号、函数名的方法

    转自:http://zhidao.baidu.com/link?url=JLCaxBAXLJVcx_8jsyJVF92E_bZjo4ONJ5Ab-HGlNBc1dfzcAyFAIygwP1qr18aa ...

  9. 预则立&&他山之石--团队计划、访谈优秀前辈

    团队计划&访谈内容 一.团队计划 序号 任务内容 计划完成时间 主要负责人 备注 1 对接教师报课系统 决定是否重构代码 2016.10.16 陈少铭.黄家俊 阅读CourseManageme ...

  10. 个人作业-Week 3

    案例分析:必应词典 IOS客户端 调研&评测 一.功能性bug bug 1: 症状:在使用拍照翻译这一功能时,只能对图片中的句子逐行进行翻译.即一个中间有换行的句子会被当成两个句子进行翻译. ...