1
2
3
4
5
6
7
8
9
body {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(gray.svg#grayscale);
    filter: gray;
}

部分置灰效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
html {
  position: relative;
  width: 100%;
  height: 100%;
}

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