有些特殊的日子需要將網(wǎng)頁置灰，比如向致敬某人、紀(jì)念某些重要的日期等。

方法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 實(shí)現(xiàn)首屏置灰遮罩

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

方法3

• 借助混合模式實(shí)現(xiàn)網(wǎng)站置灰

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