CSS 一键置灰网页

有些特殊的日子需要将网页置灰，比如向致敬某人、纪念某些重要的日期等。

方法1

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);
}