背景
让网页变为黑白配色，是个常见的诉求。而且往往是突如其来的诉求，是无法预知的。当发生这样的需求时，我们需要迅速完成变更发布。
2022年12月1日，掘金首页已经变成了黑白配色。
我的小网站首页 game.hullqin.cn 也变成了黑白配色。
一行代码
这一行代码是个CSS代码：
filter: grayscale(1)
为了使整个网页生效，你可以把它放在body里。直接写到html文件内，例如：
<style>
body {
filter: grayscale(1);
}
</style>
你也可以用内联样式，优先级最高：
<body style="filter:grayscale(1)"></body>
为了更好的兼容性，你可以加一下前缀：
<body style="filter:grayscale(1);-webkit-filter:grayscale(1)"></body>
原理
我们使用了 CSS 特性 filter，并用了 grayscale 对图片进行灰度转换，允许有一个参数，可以是数字（0到1）或百分比，0% 到 100% 之间的值会使灰度线性变化。
如果你不想完全灰掉。可以设置个相对小的数字。
掘金首页是设置了 0.95，也挺大的，看不出彩色。
兼容性
我们使用了 CSS 特性 filter，兼容性还是不错的：
如果你想获得更好的兼容性，可以加一个前缀 -webkit-：
filter: grayscale(.95);
-webkit-filter: grayscale(.95);
这正是掘金的做法：
掘金是把样式加到了 html 元素上，当然把样式加到 body 元素上效果是一样的。
写在最后
我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，联系我，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋、象棋等游戏，不收费无广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：《教你做小游戏》、《极致用户体验》。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容