某天晚上接到一个临时加班需求：实现网站的变灰的需求。
我的第一反应是重新设计的新图片(现在回想起来：我当时的脑袋估计是被门挤了o(╥﹏╥)o），产品让我去各大网站浏览了一圈，我赶紧按下了F12打开浏览器控制台选中网站的图片，然而图片并不是灰色的，细细查看终于让我发现了这行神奇的代码filter: grayscale(100%);
今天专门把实现的效果整理成一篇文章（主要整理的方式有首页整体变灰和首屏变灰两种，如果有其他的实现方案可以留言告知哟）
1、首页整体变灰
实现效果：
代码部分
html {
filter: grayscale(95%);
-webkit-filter: grayscale(95%);
-moz-filter: grayscale(95%);
-ms-filter: grayscale(95%);
-o-filter: grayscale(95%);
}
该方案可以满足大部分的需求，但也有需求是只要求首屏置灰，下拉滚动时非首屏不需要置灰，这个时候该怎么办呢？继续往下看呗~~
2、首屏变灰
-
2-1、backdrop-filter: grayscale()
效果图：
代码部分
html {
position: relative;
width: 100%;
height: 100%;
}
html::before {
content: "";
position: absolute;
backdrop-filter: grayscale(100%);
inset: 0;
z-index: 100;
}
现在我这边只是写了一个简单的没有交互的demo，如果我们页面存在大量交互的时候该怎么办呢？？？
借助pointer-events: none来保证页面交互
html::before {
content: "";
position: absolute;
backdrop-filter: grayscale(100%);
pointer-events: none;
inset: 0;
z-index: 100;
}
backdrop-filter: grayscale(100%);的实现效果很nice，但是很多旧版本的火狐不支持呀？火狐用户肿么办？让所有旧版本的火狐用户升级（距离离职又近了一步）！！！
除了 filter 和 backdrop-filter 外，CSS 中另外一个能对颜色进行一些干预及操作的属性就是 mix-blend-mode 和 background-blend-mode 了
-
2-2、mix-blend-mode替代backdrop-filter的一种方案
代码部分
html {
position: relative;
width: 100%;
height: 100%;
overflow: scroll;
background: #fff;
}
html::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 1);
mix-blend-mode: color;
pointer-events: none;
z-index: 10;
}
总结：
1、如果实现网页全部置灰 filter: grayscale();
2、如果实现首屏置灰backdrop-filter: grayscale();一定要配合pointer-events: none;
3、对于需要更好兼容性的，使用混合模式的 mix-blend-mode: hue、mix-blend-mode: saturation、mix-blend-mode: color 也都是非常好的方式
文章就更新到这里了，如果有什么不足或者更好的方案请多多指正！！！