网页置灰,只要一行代码

99 阅读2分钟

一:现象

有时候,我们有一些突如其来的事件,需要将网页变为灰色,这种需求,往往是难以预知的,而且响应是需要迅速的。

要是需要三五天排期,然后再进行项目design,走流程,再开发,一共7个工作日才能上线。那只能说一句,黄花菜都凉了。。。

所以,有没有快速的方案呢?

答案当然是:

以语雀为例,我们想实现如下效果,需要多久呢?

事实来说,30秒。

这包括打包上线的时间。

image.png

二:解决方案

看似困难,实际就是一行css效果

filter: grayscale(1)

如果是为了兼容性,可以增加一个css样式

filter: grayscale(1);
-webkit-filter:grayscale(1)

PC比较方便,如果设置的有header模版,直接将模版的<html>标签增加一个css样式即可,至于你使用内连css样式,还是其他方法,这我就不多说了,随便~~~

image.png

三:实现原理

CSS 特性 filter,grayscale参数是对图片进行灰度转换,允许有一个参数,可以是数字(0到1)或百分比,0% 到 100% 之间的值会使灰度线性变化。

如果你不想完全灰掉。可以设置个相对小的数字。

-webkit-前缀,是为了浏览器兼容性,前端的伙伴,没有不知道的吧。

有些朋友会问,为什么要加到<html>标签上,可不可以加到<body>标签上?

可以,但是,如果加到<body>标签上,当页面中存在【绝对定位/相对定位】时,其后代元素将不会继承filter属性。

所以,为了不给自己挖坑,直接将灰度属性增加到<html>标签即可。

以下是W3C中对filter的解释:

若 filter 属性的值不是 none,会给「绝对和固定定位的后代」创建一个 containing block,除非 filter 对应的元素是「当前浏览上下文中的文档根元素」(即)。

W3C网页导航:drafts.fxtf.org/filter-effe…

image.png


四.结语

相信大家看到以后,都会莞尔一笑,原来如此。


开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天,点击查看活动详情