超级会员免费看
本文介绍了前端开发者如何利用CSS3的filter属性来实现全网置灰的效果。通过设置filter: grayscale(100%)，可以将网页元素转化为灰度图像，达到置灰的目的。文章提供了一个简单的网站示例，并给出了核心代码，帮助读者理解并实践这一功能。
前言
当发生大事时，部分小伙伴会发现：“怎么某APP是灰的？不会是手机出问题了吗？” 然后再打开其他APP，发现：“都是灰的啊！明白了，看来是有大事发生……赶紧打开新闻看看”。
正文
那么，对于前端开发来说，什么效果不是用代码可以实现的呢？下面我们就灰色主题如何设置来研究一番。
网站示例
来看主站，这么设置一下，它就…就灰了呀！
其他网站也可以这么做。如淘宝手机端：
去掉之后，它又亮了，恢复如常（为了表明现在没啥大事，我还是恢复一下吧，万一误导各位。。）：
核心代码
其实核心就是：filter 属性！它是CSS3的新增属性，叫作“滤镜”。
CSS代码：filter: grayscale(100%
订阅专栏 解锁全文
扫一扫
1373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
