背景
黑白模式在很多重大的日子都需要,这种情况是无法预知的。当发生这样的诉求时,我们需要迅速完成变更发布,css的一个属性就能实现,过后删除代码即可还原页面色彩,很方便
一行代码
为了使整个网页生效,你可以把它放在 html标签的样式里。直接写到 html 文件内,例如:
<style>
html {
filter: grayscale(1);
}
</style>
也可以用内联样式,优先级最高:
<html style="filter:grayscale(1)">
...
</html>
原理
实现思路的话就是利用css的滤镜(filter)属性,并用了 grayscale 对图片进行灰度转换,允许有一个参数,可以是数字(0到1)或百分比,0% 到 100% 之间的值会使灰度线性变化。若未设置值,默认是 0,如果你不想完全灰掉。可以设置个相对小的数字。