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

Posted 2021-05-22 Frank-Link

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

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

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

先放结果：

// 压缩后的文件名：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所在的样式表，就能直接找到对应的文件名既是上面的结果。