大家都知道，当一些重大事件发生的时分，咱们的网站，或许需求置灰，像是这样：
当然，通常而言，全站置灰是非常简略的工作，大部分前端同学都知道，只是需求运用一行 CSS，就能完成全站置灰的办法。
像是这样，咱们只是需求给 HTML 增加一个统一的滤镜即可：
html {
filter: grayscale(.95);
-webkit-filter: grayscale(.95);
}
又或者，运用 SVG 滤镜，也能够快速完成网站的置灰：
<div>
// ...
</div>
<svg xmlns="https://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>
html {
filter: url(#grayscale);
}
大部分时分，这样都能够解决大部分问题。不过，也有一些破例。譬如，假如咱们只是需求置灰网站的首屏，而当用户开端滚动页面的时分，非首屏部分不需求置灰，像是如下动图所示，该怎么办呢？
看看暗示：
这种只置灰首屏的诉求该如何完成呢？
运用 backdrop-filter 完成滤镜遮罩
这儿，咱们能够凭借 backdrop-filter 完成一种遮罩滤镜作用。
filter VS backdrop-filter
在 CSS 中，有两个和滤镜相关的特点 — filter 和 backdrop-filter。
backdrop-filter 是更为新的标准推出的新特点，能够点击检查 Filter Effects Module Level 2。
-
filter：该特点将含糊或色彩偏移等图形作用应用于元素。 -
backdrop-filter： 该特点能够让你为一个元素后边区域增加图形作用（如含糊或色彩偏移）。 它适用于元素背面的一切元素，为了看到作用，有必要使元素或其布景至少部分透明。
留意两者之间的差异，filter 是作用于元素自身，而 backdrop-filter 是作用于元素背面的区域所覆盖的一切元素。而它们所支持的滤镜种类是如出一辙的。
backdrop-filter 最为常见的运用办法是用其完成毛玻璃作用。
看这样一段代码：
<div class="bg">
<div>Normal</div>
<div class="g-filter">filter</div>
<div class="g-backdrop-filter">backdrop-filter</div>
</div>
.bg {
background: url(image.png);
& > div {
width: 300px;
height: 200px;
background: rgba(255, 255, 255, .7);
}
.g-filter {
filter: blur(6px);
}
.g-backdrop-filter {
backdrop-filter: blur(6px);
}
}
CodePen Demo — filter 与 backdrop-filter 对比
filter 和 backdrop-filter 运用上最显着的差异在于：
-
filter作用于当时元素，而且它的子孙元素也会承继这个特点 -
backdrop-filter作用于元素背面的一切元素
仔细区别了解，一个是当时元素和它的子孙元素，一个是元素背面的一切元素。
了解了这个，就能够理解为什么有了 filter，还会有 backdrop-filter。
运用 backdrop-filter 完成首屏置灰遮罩
这样，咱们能够快速的凭借 backdrop-filter 完成首屏的置灰遮罩作用：
html {
position: relative;
width: 100%;
height: 100%;
overflow: scroll;
}
html::before {
content: "";
position: absolute;
inset: 0;
backdrop-filter: grayscale(95%);
z-index: 10;
}
只是只是这样而已，咱们就在整个页面上方叠加了一层滤镜蒙版，完成了只对首屏页面的置灰：
凭借 pointer-events: none 保证页面交互
当然，这儿有个很严重的问题，咱们的页面是存在大量交互作用的，假如叠加了一层遮罩作用在其上，那这层遮罩下方的一切交互时刻都将失效，譬如 hover、click 等。
那该如何解决呢？这个也好办，咱们能够通过给这层遮罩增加上 pointer-events: none，让这层遮罩不阻挡事件的点击交互。
代码如下：
html::before {
content: "";
position: absolute;
inset: 0;
backdrop-filter: grayscale(95%);
z-index: 10;
+ pointer-events: none;
}
CodePen Demo — Gray Website by backdrop-filter
当然，有同学又会开端质疑了，backdrop-filter 虽好，可是你自己瞅瞅它的兼容性，很多旧版 firefox 不支持啊大哥。咱们那么多火狐的用户咋办？
截至至 2022/12/01，Firefox 的最新版别为 109，可是在 Firefox 103 之前，都是不支持
backdrop-filter的。
别急，除了 filter 和 backdrop-filter，咱们还有办法能够完成网站的置灰。
凭借混合形式完成网站置灰
除了 filter 和 backdrop-filter 外，CSS 中另外一个能对色彩进行一些干涉及操作的特点便是 mix-blend-mode 和 background-blend-mode 了，翻译过来便是混合形式。
假如你对混合形式还比较生疏，能够看看我的这几篇文章：
- 难以想象的色彩混合形式 mix-blend-mode
- 难以想象的混合形式 background-blend-mode
- CSS 奇技淫巧 | 妙用混合形式完成文字镂空波浪作用
- 利用混合形式，让文字智能适配布景色彩
这儿，backdrop-filter 的代替计划是运用 mix-blend-mode。
看看代码：
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;
}
咱们仍是叠加了一层额外的元素在整个页面的首屏，而且把它的布景色设置成了黑色 background: rgba(0, 0, 0, 1)，正常而言，咱们的网站应该是一片黑色的。
可是，神奇的地方在于，通过混个形式的叠加，也能够完成网站元素的置灰。咱们来看看作用：
通过实测：
{
mix-blend-mode: hue; // 色相
mix-blend-mode: saturation; // 饱和度
mix-blend-mode: color; // 色彩
}
上述 3 个混合形式，叠加黑色布景，都是能够完成内容的置灰的。
值得留意的是，上述办法，咱们需求给 HTML 设置一个白色的布景色，一起，不要忘记了给遮罩层增加一个 pointer-events: none。
CodePen Demo — Gray Website By MixBlendMode
总结一下
这儿，再简略总结一下。
- 假如你需求全站置灰，运用 CSS 的
filter: grayscale() - 关于一些低版别的浏览器，运用 SVG 滤镜通过
filter引进 - 关于只是需求首屏置灰的，能够运用
backdrop-filter: grayscale()配合pointer-events: none - 关于需求更好兼容性的，运用混合形式的
mix-blend-mode: hue、mix-blend-mode: saturation、mix-blend-mode: color也都是非常好的办法
有个小技巧，在 CSS 的国际中，凡是和色彩打交道的工作，你都应该想起 filter、backdrop-filter 和 mix-blend-mode。
最终
好了，本文到此结束，期望本文对你有所帮助 :)
想 Get 到最有意思的 CSS 资讯，千万不要错过我的大众号 — iCSS前端趣闻
更多精彩 CSS 技术文章汇总在我的 Github — iCSS ，继续更新，欢迎点个 star 订阅保藏。
假如还有什么疑问或者建议，能够多多交流，原创文章，文笔有限，孤陋寡闻，文中若有不正之处，万望奉告。
