背景

让网页变为黑白配色，是个常见的诉求。而且往往是突如其来的诉求，是无法预知的。当发生这样的需求时，我们需要迅速完成变更发布。

2022年12月1日，掘金首页已经变成了黑白配色。

我的小网站首页 ​​game.hullqin.cn​​ 也变成了黑白配色。

一行代码

这一行代码是个CSS代码：

filter: grayscale(1)

为了使整个网页生效，你可以把它放在 ​​<html>​​ 标签的样式里。直接写到 html 文件内，例如：

<style>
html {
  filter: grayscale(1);
}
</style>

你也可以用内联样式，优先级最高：

<html style="filter:grayscale(1)">
...
</html>

为了更好的兼容性，你可以加一下前缀：

<html style="filter:grayscale(1);-webkit-filter:grayscale(1)">
...
</html>

原理

我们使用了 CSS 特性 filter，并用了 ​​grayscale​​ 对图片进行灰度转换，允许有一个参数，可以是数字（0到1）或百分比，0% 到 100% 之间的值会使灰度线性变化。

如果你不想完全灰掉。可以设置个相对小的数字。

掘金首页是设置了 0.95，也挺大的，看不出彩色。

兼容性

我们使用了 CSS 特性 filter，兼容性还是不错的：

一行代码，让网页变为黑白配色_html

如果你想获得更好的兼容性，可以加一个前缀 ​​-webkit-​​：

filter: grayscale(.95);
-webkit-filter: grayscale(.95);

这正是掘金的做法：

一行代码，让网页变为黑白配色_html_02

掘金是把样式加到了 html 元素上。

filter 样式加到 还是 上

我的小网页是把 filter 样式加到了 ​​<body>​​ 元素上。通常这没有问题。

<body style="filter:grayscale(1);-webkit-filter:grayscale(1)">
...
</body>

但如果你的网页内有「绝对和固定定位」元素，一定要把 filter 样式加到 ​​<html>​​ 上。

原因见: ​​drafts.fxtf.org/filter-effe…​​

引用：

A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context.

翻译：

若 filter 属性的值不是 none，会给「绝对和固定定位的后代」创建一个 containing block，除非它适用的元素是当前浏览上下文中的文档根元素（即​​<html>​​）。

因此，兼容性最好的方法是把 filter 样式加到 ​​<html>​​ 上。

写在最后

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，联系我，交个朋友），转发本文前需获得作者​​HullQin​​授权。我独立开发了​​《联机桌游合集》​​，是个网页，可以很方便的跟朋友联机玩斗地主、​​五子棋​​、​​象棋​​等游戏，不收费无广告。还独立开发了​​《合成大西瓜重制版》​​。还开发了​​《Dice Crush》​​参加Game Jam 2022。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：​​《教你做小游戏》​​、​​《极致用户体验》​​。