前端网站置灰，实现哀悼模式

背景：全国的哀悼日，会让首屏或者整个网站置灰，但是一行行加样式是不切实际的，css 一行代码可以解决这个需求
方便快捷，兼容性也还可以。

1. 整个网站置灰

， 整个网站置灰.png

html{
    filter: grayscale(0.95);
  } 

给html直接添加一个统一的滤镜即可

2. 有时候只需要首屏置灰，当用户滚动的时候，不是首屏的部分依旧展示原本的颜色

  //方法一
 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区别

• filter: 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。
• backdrop-filter： 可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
• mix-blend-mode：描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。