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. Grunt 新手一日入门

    var sassStyle = 'expanded'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { out ...

  2. Python学习流程

    这是我在过去几家公司招聘到工程师,Python入职培训的过程. 时间分为4周,全部自学,仅提供大纲.适用于Web方向: 1.Week1:读完<简明Python教程>,适应Python开发环 ...

  3. sqlserver sql语句附加 分离数据库

    当使用 sp_attach_db 系统存储过程附加数据库时- - Tag: 当使用 sp_attach_db 系统存储过程附加数据库时 //附加数据库 sp_attach_db 当使用 sp_atta ...

  4. tomcat启动报错：java.lang.NoClassDefFoundError

    tomcat启动加载spring配置文件时报错,找不到类GetBooksRequest,经排查实际上该类已经存在.后来发现日志里还有一句: This is very likely to create ...

  5. laravel 中config的使用

    在laravel的config中添加配置文件(比如:alipay.php)文件内容为return数组的形式 在方法中使用config()函数获取数据 $config = config('alipay. ...

  6. microtime() 测试代码执行时间，提高编码效率

    <?php $b_time = microtime(true); $a = array("); $count = ; foreach ($a as $key => $value) ...

  7. model进阶（queryset，中介模型，查询优化，extra）

    queryset 方法 ############# 可切片 def queryTest(request): ret = models.Atricle.objects.all() 数据库查询 print ...

  8. Windows可信任路径代码执行漏洞

    乌云里有很多这样的案例,当然在开发过程中也会存在这样的问题 搜索:可信任路径漏洞 调用案例中的描述: Microsoft Windows API使用CreateProcess()函数创建新的进程及其主 ...

  9. 二进制(signed or unsigned)补码

    在计算机系统中,数值一律用补码来表示(存储). 主要原因:使用补码,可以将符号位和其它位统一处理:同时,减法也可按加法来处理.另外,两个用补 码表示的数相加时,如果最高位(符号位)有进位,则进位被舍弃 ...

  10. VS2010调用halcon的时候出现试图加载格式不正确的程序(this.hWindowControl1 = new HalconDotNet.HWindowControl();)

    [重要错误修改] /// <summary> /// 设计器支持所需的方法 - 不要 /// 使用代码编辑器修改此方法的内容. /// </summary> private v ...