记录一下最近很火的用一行代码实现网页变灰

/ 0评 / 0

2020 年 4 月 4 日,星期六,清明节。基本上你看到的主流网站都变灰白了(虽然我的也是...),大家可以看到全站的内容都变成灰色了,包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢?

有人会以为所有的内容都统一换了一个 CSS 样式,图片也全换成灰色的了,按钮等样式也统一换成了灰色样式。

但你想想这个成本也太高了,而且万一某个控件忘记加灰色样式了岂不是太突兀了。

其实,解决方案很简单,只需要几行代码就能搞定了。

直接css:

也是用的这个 CSS 样式,其内容为:

这个实现看起来兼容性会更好一些,所以通过一个全局的 CSS 样式就能将整个网站变成灰色效果。

从上面css样式代码中看到有个样式名叫做 filter,于是搜下 MDN 的官方介绍。

其链接为:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter 大家不妨可以进去学习一下。


发表评论

电子邮件地址不会被公开。 必填项已用*标注