网站置灰的方式

方式一：filter（全站）

html {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}

方式二：SVG滤镜（全站）

<svg xmlns="https://www.w3.org/2000/svg" style={{ width: '100vw', height: '100vh', display: 'block' }}>
  <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 {
    -webkit-filter: url(#grayscale);
            filter: url(#grayscale);
}

方式三：backdrop-filter（首屏）

html::before {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-backdrop-filter: grayscale(1);
            backdrop-filter: grayscale(1);
    pointer-events: none;
}

方式四：mix-blend-mode（首屏）

html {
    background: #fff;
}

html::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 1);
    mix-blend-mode: color;
    pointer-events: none;
}