一：概述

某些特定时期，网站需要置灰，那么，纯css怎么实现呢？

二：方式

1：直接控制html

html,.gray {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

2：使用backdrop-filter 实现首屏置灰遮罩

html {
  position: relative;
}
html::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 保证页面交互 */
  pointer-events: none;
  z-index: 999;
  backdrop-filter: grayscale(95%);
}

3：借助混合模式实现网站置灰

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