1. 使整个页面的图片都变成灰色的，代码如下。

html{
    font-size: 100%;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg 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>#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(1);
}

2. 如果只需要某些图片变成灰色的，引用类名即可。例如：

.gray{
    font-size: 100%;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
  
 filter: url("data:image/svg+xml;utf8,<svg
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>#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(1);
}

CSS3 grayscale滤镜图片变黑白的更多相关文章

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

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

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

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

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

    http:/CSS 地址:/www.runoob.com/cssref/css3-pr-filter.html CSS代码: .gray { -webkit-filter: grayscale(%); ...

  4. css3 图片变黑白 filter

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

  5. java 让图片变黑白

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

  6. CSS3动画@keyframes图片变大变小颜色变化

    在我做公司官网的时候也会帮着写一些游戏的静态页,今天产品要求为了突出一个按钮,他要有颜色的变化而且要变大变小,然后我就在网上搜了下呼吸灯和其他的案例,写了个小damo,看着还有些魔性嘞. html: ...

  7. CSS3实现鼠标移动到图片上图片变大

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

  8. CSS3的滤镜filter属性

    css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊 二.brightnes ...

  9. 巧用 CSS3 filter(滤镜) 属性

    原文链接:CSS3 filter(滤镜) 属性 效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...

随机推荐

  1. rpm 软件包离线安装

    1. 插件安装(可选) yum install yum-plugin-downloadonly 2. 只下载不安装(perl 演示) yum install --downloadonly --down ...

  2. Ubantu 新建用户后没有生成对应文件夹

    原命令:useradd python 改正后:useradd python -m 后成功在home目录下创建文件夹 原因: man useradd就可以看到如此介绍:Create the user´s ...

  3. 利用脚本启动java程序

    今天在工作中,需要写一个shell脚本,启动一个socket程序,从而模拟短信网关.查了一些资料,终于搞定了,现在记录一下,方便大家查阅. 为了说明使用方法,我们就用最简单的程序来实现,比如我们要运行 ...

  4. C 游戏所要看的书

    C 游戏所要看的书 1.C++primer中文版第4版     经典啊2.C++标准程序库自修教程与参考手册 3.Windows程序设计第5版 4.MFC windows程序设计第2版中文版 5.VC ...

  5. Java-Maven-Runoob：Maven 构建 Java 项目

    ylbtech-Java-Maven-Runoob:Maven 构建 Java 项目 1.返回顶部 1. Maven 构建 Java 项目 Maven 使用原型 archetype 插件创建项目.要创 ...

  6. windows环境下，安装zookeeper~

    1.   概述 ZooKeeper是Hadoop的正式子项目,它是一个针对大型分布式系统的可靠协调系统,提供的功能包括:配置维护.名字服务.分布式同步.组服务等.ZooKeeper的目标就是封装好复杂 ...

  7. UE4事件相关总结

    转自:http://blog.ch-wind.com/ue4-event-overview/ 事件机制是实现游戏内逻辑的重要部分,在开始进行游戏逻辑的设计和实现之前,对UE4的事件机制进行理解是非常必 ...

  8. java成神之——线程操作

    线程 Future CountDownLatch Multithreading synchronized Thread Producer-Consumer 获取线程状态 线程池 ThreadLocal ...

  9. 使用avalon实现SKU组合查询功能

    SKU(stock keeping unit库存量单位)组合查询是网上商场一个非常常用的功能.具体来说,一件商品会有许多型号,许多颜色,许多产地,许多码寸,而满足用户选中的这些条件的具体商品可能有库存 ...

  10. MySQL的blob类型

    MySQL中的Blob类型 MySQL中存放大对象的时候,使用的是Blob类型.所谓的大对象指的就是图片,比如jpg.png.gif等格式的图片,文档,比如pdf.doc等,以及其他的文件.为了在数据 ...