得,今天正好说说这个事儿。记得应该是前年,对,就是2022年12月6号那天,上面通知是全国哀悼日。我寻思着,咱虽然就是个普通老百姓,也没啥大的平台,但自己平时也捣鼓个小网站、写写博客啥的,这种日子,总得有点表示,跟上国家的步调嘛
那天早上起来,看到新闻通知,心里也挺不是滋味的。想着该做点啥实际的?搞得太复杂咱也不会,也没那精力。最直接的,就是把我那个小破网站弄成黑白灰的色调,这应该是最常见的做法,也能表达一份哀思。
具体咋弄的?
我这人动手能力还行,但技术也就半桶水。这种全站变灰的需求,我记得以前好像遇到过,或者帮别人弄过类似的。凭着记忆,我琢磨着应该是用CSS样式来控制最方便。
第一步,打开我网站的后台。
咱用的是比较常见的建站程序,找找看有没有能全局添加CSS代码的地方。一般主题设置里头或者专门的自定义CSS区域都有。找到!就是一个可以填写自定义样式代码的文本框。
第二步,添加变灰代码。
具体代码是啥来着?我想想,好像是跟滤镜(filter)有关。赶紧上网搜一下确认,果然没错。就是下面这行简单的CSS代码:
html { filter: grayscale(100%); }
或者写成这样也行:
html { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
后面这个带 -webkit-
前缀的是为兼容一些老版本的浏览器,虽然现在可能用处不大,但加上总没坏处,求个稳妥。
我就把这行代码复制粘贴到我网站后台那个自定义CSS的框里。
第三步,保存并检查效果。
点击保存按钮。然后赶紧打开我网站的前台页面,刷新一下。诶!效果立马就出来,整个网站,不管是文字、图片还是各种按钮、背景,全都变成黑白灰色调,看着确实肃穆不少。我又随便点开几个不同的页面,包括文章页、分类页啥的,都统一变灰,说明这代码加对地方,起作用。
后续还得记得还原
这个灰色效果只是哀悼日当天需要。总不能让网站一直这么灰着。我还特意给自己手机设个提醒。
- 提醒自己等12月6号结束,比如到7号早上。
- 再登录网站后台。
- 把之前加的那行CSS代码给删掉。
- 再次保存,刷新前台页面,检查网站是不是恢复成原来的彩色。
这步也很重要,不然网站一直灰着,时间长访问体验也不
总的来说,给网站加上这个哀悼日变灰的效果,技术上讲,非常简单,前后也就花我几分钟时间。但这几分钟的操作,我觉得挺有意义的。它不仅仅是一个技术动作,更像是一种态度的表达,一种对历史事件、对逝去生命的尊重和缅怀。虽然咱能做的很有限,但通过这种方式参与其中,心里也觉得踏实点儿,算是尽自己的一份心意。