【技术分享】网站页面变灰-一段css代码让全站变灰-网站哀悼代码

今年4月4日，我国为了纪念抗疫英雄哀悼遇难同胞，很多网站全站改成灰色调。

安鹿发现大家都是通过在网站底部添加CSS代码，利用 grayscale 滤镜及各浏览器前缀（如 -webkit-filter ），实现全站色调转为灰色。代码支持跨浏览器兼容，以矩阵变换和滤镜函数确保显示效果。

下面是修改全站页面变成灰色调的代码：

<style>
    html{ 
        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);
    }
</style>

将上面代码放在网站底部代码中即可，像emlog博客只需打开后台系统设置找到底部代码设置加入代码