其他分享
首页 > 其他分享> > 百度百科中的黑白效果是如何实现的

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

作者:互联网

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

以前经常看到类似的页面,也知道实现方案比较简单,但是百科页面找不到那个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所在的样式表,就能直接找到对应的文件名既是上面的结果。

标签:黑白,memorial,百科,100%,grayscale,filter,百度,页面
来源: https://www.cnblogs.com/frank-link/p/14799056.html