如何将彩色网页内容变成灰白的

最新推荐文章于 2022-12-28 14:29:36 发布

前端岚枫

最新推荐文章于 2022-12-28 14:29:36 发布

阅读量1.7k

点赞数

分类专栏： css

css 同时被 2 个专栏收录

94 篇文章 1 订阅

订阅专栏

css专题

19 篇文章 1 订阅

订阅专栏

不知道还有多少人记得曾经为了悼念5·12汶川地震，很多网站都将页面中所有的图片以及文字变成灰色。彪叔曾经也做了一个工具“哀悼的CSS（网站变灰）2.0”，用来把网站变灰。

想想当初有多人为了这个事情而忙得不可开交，要把所有的图片在photoshop里去色，再到样式表中把所有的颜色值改成灰色，最后等过了时间之后又要恢复原状。其中也有一些网站仅仅是在IE浏览器中用了滤镜来解决，并没有去处理其他浏览器的。

 
        html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale= 
        1 
        );}

今天发现其实也可以让Firefox和Chrome变成灰色，不过Opera和Safari没成功，暂时先不理会，有一点东西就先跟大家分享。首先来看一下正常的页面http://guangjs.com，好多漂亮的彩图；再看一下我把源码下载，添加了一行CSS样式后的效果（点这里查看）。

 
        html { 
       
        filter: grayscale( 
        100% 
        ); 
       
        -webkit-filter: grayscale( 
        100% 
        ); 
       
        -moz-filter: grayscale( 
        100% 
        ); 
       
        -ms-filter: grayscale( 
        100% 
        ); 
       
        -o-filter: grayscale( 
        100% 
        ); 
       
        filter:  
        url 
        (desaturate.svg#grayscale); 
       
        filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale= 
        1 
        ); 
       
        -webkit-filter: grayscale( 
        1 
        ); 
       
        }

大面积的操作降低页面性能是肯定的，这里分享这个也只是想跟大家说一下，最近我看到这个样式，感觉太厉害了。在这个样式代码中，涉及到了一个文件，就是desaturate.svg，从文件扩展名中可以看到，利用到了SVG技术了，代码如下：

 
        < 
        svg 
        xmlns 
        = 
        "http://www.w3.org/2000/svg" 
        version 
        = 
        "1.1" 
        > 
       
 
         
        < 
        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 
        > 
       

只需要将这代码保存为desaturate.svg，再通过url链接就可以了，十分简单。在前面看到的demo页面中是在body中增加了样式，影响页面中所有的元素，如果有需要的话，可以单独设置一个公共库中的类名来调用，如：

 
        .pic_gray { 
       
        filter: grayscale( 
        100% 
        ); 
       
        -webkit-filter: grayscale( 
        100% 
        ); 
       
        -moz-filter: grayscale( 
        100% 
        ); 
       
        -ms-filter: grayscale( 
        100% 
        ); 
       
        -o-filter: grayscale( 
        100% 
        ); 
       
        filter:  
        url 
        (desaturate.svg#grayscale); 
       
        filter:  
        gray 
        ; 
       
        -webkit-filter: grayscale( 
        1 
        ); 
       
        }