百度百科中的黑白效果是如何实现的

大佬去世的时候百度百科都会把他们的个人百科页面变为黑白

以前经常看到类似的页面，也知道实现方案比较简单，但是百科页面找不到那个 css 代码，也就懒得找了

2021/05/22 日袁老去世，再次打开百科页面，仔细找了下，总算找到了那行 css 放的位置了

先放结果：

使用的是 css3 中的 filter（滤镜） 属性，将其值设置为 grayscale（100%），即可将图像完全转为灰度图像

// 压缩后的文件名：wiki-lemma_b5c72d5.css
body.memorial > * {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);
}

查找步骤：

1、百科页面检查元素，全局搜 grayscale，结果都是错误的

2、看根元素节点（html/body）的 class，发现 body 上面有个‘memorial’悼念，然后全局搜这个，发现 script 里面有以下代码片段，说明本次悼念（黑白）时间是一周

data.isMemorial = true || "";
data.memorial =
  [
    {
      data: { isGray: true, startTime: "2021-05-22", endTime: "2021-05-30" },
      position: 0,
    },
  ] || "";

3、知道了 class，直接 ctrl + s 保存当前页面的所有静态资源，使用编辑器全局搜索 .memorial 所在的样式表，就能直接找到对应的文件名既是上面的结果。