大家肯定注意到,很多网站变成灰色,原因都知道,是为了纪念一位伟人。
比如我们打开百度,界面如下:
这种把整个页面都变成灰色,是怎么做到的呢?
对前端开发有经验的同学,也许会说换一套灰色的模板UI。
显然是不可能的,网站上元素这么多,而且一直在迭代新功能,都改成灰色成本太大了,所以一定有另一种非常快速的方法。
在浏览器按下F12,我找到了答案。
body上多了一个名为big-event-gray的样式。
名字很好理解,大事件灰色,所以就是它了。
于是找了下这个样式的定义,代码如下(为方便阅读,我格式化了一下):
关键是这个grayscale函数,这是一个css函数,可以直接把图片转成灰色。
网页实现灰色相对简单,但是APP就比较复杂了。
随便打开几个APP,会发现一般只有首页是灰色的,打开新的页面还是原来的配色。
原因是APP每个页面的样式都是独立的,除非开发功能的时候就统一读取公共的参数设置颜色,但是刚才也说了,那成本太高了。
点个“在看”,缅怀伟人,永垂不朽。