如何将彩色网页变成黑白色的？（给页面加上一个灰度的滤镜）

Posted 2020-11-27 浩荡九天

明天4月4日会举行全国性哀悼活动，小伙伴需要将彩色网页都变成黑白的，代码如下：

<style type="text/css">html {-webkit-filter: grayscale(100%);}</style>

上面的 CSS 代码可能只对主流浏览器支持，如果你需要支持 QQ 浏览器、360 浏览器、IE 浏览器等等其他浏览器需要使用下面这段：

<style> 
    html { 
        -webkit-filter: grayscale(100%); 
        -moz-filter: grayscale(100%); 
        -ms-filter: grayscale(100%); 
        -o-filter: grayscale(100%); 
        filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  
        _filter:none; 
    } 
</style>

filter 是滤镜的意思，filter:gray 的意思就是说给页面加上一个灰度的滤镜，所以 html 里面的所有内容都会变成黑白的了。不过这个滤镜对于 chrome 和 safari 浏览器是无效的，所以下面会有一行-webkit-filter: grayscale(100%);这个样式是专属于使用 webkit 内核的浏览器的，意思和 FILTER: gray;差不多，只是写法不同罢了。