本文介绍如何使用CSS滤镜属性快速实现网页的黑白显示效果。通过简单的代码修改即可达到全局黑白模式，适用于纪念日等特殊场合。
背景
黑白模式在很多重大的日子都需要，这种情况是无法预知的。当发生这样的诉求时，我们需要迅速完成变更发布,css的一个属性就能实现,过后删除代码即可还原页面色彩,很方便
一行代码
为了使整个网页生效，你可以把它放在 html标签的样式里。直接写到 html 文件内，例如：
<style>
html {
filter: grayscale(1);
}
</style>
也可以用内联样式，优先级最高：
<html style="filter:grayscale(1)">
...
</html>
原理
实现思路的话就是利用css的滤镜(filter)属性,并用了 grayscale 对图片进行灰度转换，允许有一个参数，可以是数字（0到1）或百分比，0% 到 100% 之间的值会使灰度线性变化。若未设置值，默认是 0,如果你不想完全灰掉。可以设置个相对小的数字。
扫一扫
2055
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
