滤镜|一行代码实现黑白模式，前端人必不可少的技能之一

文章图片

_原题：一行代码实现哀悼模式，前端人必不可少的技能之一

今天小兄弟问我黑白模式怎么实现，局方说这个效果今天必须实现，如果没有实现，回家后12点都要打电话给拉起来实现出来。

黑白模式在很多重大的日子都需要，我记得第一次看到黑白模式的时候还是在2018年的时候，当时电脑上手机上一打开网页或者app全都是黑白的。
实现思路实现思路的话就是利用css的滤镜(filter)属性先上代码：
document.body.style.filter = 'grayscale(1)'
Filter有很多的函数，其中grayscale()函数将改变输入图像灰度。值为 100% 则完全转为灰度图像，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘数。若未设置值，默认是 0 。
官网的解释是CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。
CSS 标准里包含了一些已实现预定义效果的函数。你也可以参考一个 SVG 滤镜，通过一个 URL 链接到 SVG 滤镜元素
浏览器兼容性
看到一大片绿的话你就可以放心的使用啦， IE不在我们考虑范围内了，现在正在被微软官方自己在FS 。
我给小兄弟只说了两句话：css的filter属性你需要去了解一下，细节问题你可以找温柔的度娘问。
然后10分钟后小兄弟给我发了一个消息：搞定啦，今晚终于不用熬夜了。
【滤镜|一行代码实现黑白模式，前端人必不可少的技能之一】小兄弟，你学会了吗？