背景：全國的哀悼日崭参，會讓首屏或者整個網(wǎng)站置灰呵曹，但是一行行加樣式是不切實際的，css 一行代碼可以解決這個需求
方便快捷何暮，兼容性也還可以奄喂。
1. 整個網(wǎng)站置灰
，
整個網(wǎng)站置灰.png
html{
filter: grayscale(0.95);
}
給html直接添加一個統(tǒng)一的濾鏡即可
2. 有時候只需要首屏置灰海洼，當(dāng)用戶滾動的時候跨新，不是首屏的部分依舊展示原本的顏色
//方法一
html::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
backdrop-filter:grayscale(0.95);
pointer-events: none;
}
//方法二
html::before{
content: '';
position: absolute;
width: 100%;
height: 100%;
mix-blend-mode: inherit;
background-color: #3333334a;
pointer-events: none
}
首屏置灰.png
注： pointer-events: none加上這個屬性表示“穿透”該元素并且指定該元素“下面”的任何東西。
3. filter與backdrop-filter以及mix-blend-mode區(qū)別
- filter: 將模糊或顏色偏移等圖形效果應(yīng)用于元素坏逢。濾鏡通常用于調(diào)整圖像域帐、背景和邊框的渲染。
- backdrop-filter： 可以讓你為一個元素后面區(qū)域添加圖形效果（如模糊或顏色偏移）是整。因為它適用于元素背后的所有元素肖揣，為了看到效果，必須使元素或其背景至少部分透明浮入。
- mix-blend-mode：描述了元素的內(nèi)容應(yīng)該與元素的直系父元素的內(nèi)容和元素的背景如何混合龙优。
