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

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

文章图片
今天小兄弟问我黑白模式怎么实现，局方说这个效果今天必须实现，如果没有实现，回家后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分钟后小兄弟给我发了一个消息：搞定啦，今晚终于不用熬夜了。
小兄弟，你学会了吗？返回搜狐，查看更多
【一行代码实现黑白模式，前端人必不可少的技能之一】责任编辑：