了解

我们先来看看各大主流网站是如何实现这种效果的。

阿里云

腾讯云

BiliBili

京东

淘宝

掘金

实现

我们可以发现它们实现的方式都是利用了 filter 属性。

CSS 属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

综上所述，我们只要给页面的 html 设置这种样式即可变灰：

1
2
3

html {
  filter: grayscale(100%);
}

我们还可以发现有些的代码写了很多行，比如京东。这是因为它对 filter 属性做了兼容。

filter 兼容性查询

完整版如下：

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