网页置灰-保留部分彩色

因哀悼日一些原因可能需要网站置灰，全局置灰相对简单一些，有些网站是部分置灰或者首屏置灰；在知乎上看到了简单记录一下

全局置灰-方法1

html{
    filter: grayscale(100%);
}

兼容写法

html{
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}

全局置灰-方法2

这里利用backdrop-filter做一个遮罩来置灰，其中pointer-events: none;目的是不阻挡用户交互

html::before {
    content: "";
    position: fixed;
    backdrop-filter: grayscale(100%);
    pointer-events: none;
    inset: 0;
    z-index: 100;
}

首屏置灰

只首屏置灰的话把定位改成absolute

html::before {
    content: "";
    position: absolute;
    backdrop-filter: grayscale(100%);
    pointer-events: none;
    inset: 0;
    z-index: 100;
}