某天晚上接到一個(gè)臨時(shí)加班需求：實(shí)現(xiàn)網(wǎng)站的變灰的需求。
我的第一反應(yīng)是重新設(shè)計(jì)的新圖片(現(xiàn)在回想起來：我當(dāng)時(shí)的腦袋估計(jì)是被門擠了o(╥﹏╥)o）缆蝉，產(chǎn)品讓我去各大網(wǎng)站瀏覽了一圈宇葱，我趕緊按下了F12打開瀏覽器控制臺(tái)選中網(wǎng)站的圖片，然而圖片并不是灰色的刊头，細(xì)細(xì)查看終于讓我發(fā)現(xiàn)了這行神奇的代碼filter: grayscale(100%);
今天專門把實(shí)現(xiàn)的效果整理成一篇文章（主要整理的方式有首頁整體變灰和首屏變灰兩種山橄，如果有其他的實(shí)現(xiàn)方案可以留言告知喲）
1躬柬、首頁整體變灰
實(shí)現(xiàn)效果：
代碼部分
html {
filter: grayscale(95%);
-webkit-filter: grayscale(95%);
-moz-filter: grayscale(95%);
-ms-filter: grayscale(95%);
-o-filter: grayscale(95%);
}
該方案可以滿足大部分的需求劳翰，但也有需求是只要求首屏置灰请祖，下拉滾動(dòng)時(shí)非首屏不需要置灰，這個(gè)時(shí)候該怎么辦呢穿肄？繼續(xù)往下看唄~~
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;
}
現(xiàn)在我這邊只是寫了一個(gè)簡(jiǎn)單的沒有交互的demo，如果我們頁面存在大量交互的時(shí)候該怎么辦呢矢否？仿村？？
借助pointer-events: none來保證頁面交互
html::before {
content: "";
position: absolute;
backdrop-filter: grayscale(100%);
pointer-events: none;
inset: 0;
z-index: 100;
}
backdrop-filter: grayscale(100%);的實(shí)現(xiàn)效果很nice兴喂，但是很多舊版本的火狐不支持呀？火狐用戶腫么辦焚志？讓所有舊版本的火狐用戶升級(jí)（距離離職又近了一步）Ｒ旅浴！酱酬！
除了 filter 和 backdrop-filter 外壶谒，CSS 中另外一個(gè)能對(duì)顏色進(jìn)行一些干預(yù)及操作的屬性就是 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;
}
總結(jié)：
1膳沽、如果實(shí)現(xiàn)網(wǎng)頁全部置灰 filter: grayscale();
2汗菜、如果實(shí)現(xiàn)首屏置灰backdrop-filter: grayscale();一定要配合pointer-events: none;
3、對(duì)于需要更好兼容性的挑社，使用混合模式的 mix-blend-mode: hue陨界、mix-blend-mode: saturation、mix-blend-mode: color 也都是非常好的方式
文章就更新到這里了痛阻，如果有什么不足或者更好的方案請(qǐng)多多指正＞瘛！阱当！
