每逢清明或者哀悼日，很多站长为怀念先人或事迹就想把网站整体变灰色，很多小白站长却不知道怎么做。

网站整体如何一键变灰？CSS实现网站一键变灰？-QUI-Notes

其实网站整体变灰的原理很简单：通过滤镜filter将图片、文字以及图标等网站所有可见元素全部黑白，去掉颜色。

以下就是CSS实现网站整体一键变灰色的代码：

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,#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}

两种使用方法：

1.将代码扔到全局css样式的最后一行！！！
2.用<style>上面代码</style>放到网站head代码里面也可以生效

这样的话，你的网站也可以实现整体变灰效果了，简单的css就能实现这样的功能，是不是被css滤镜震撼到了，其实filter滤镜还有很多效果，例如：图片背景模糊，颜色叠加消融，都需要前端慢慢学习，去总结！