# 背景让网页变为黑白配色，是个罕见的需求。但它往往是突如其来的需求，我们无法预知。当发生这样的需求时，我们需要迅速改好代码、发布。 2022年12月1日，掘金首页已经变成了黑白配色。我的小网站首页 [game.hullqin.cn](https://game.hullqin.cn) 也变成了黑白配色。 # 一行代码这一行代码是个CSS代码： ```css filter: grayscale(1) ``` 为了使整个网页生效，你可以把它放在 `` 标签的样式里。直接写到 html 文件内，例如： ```html ``` 你也可以用内联样式，只要没用 `important` CSS 语法，内联样式优先级最高： ```html ... ``` 为了更好的兼容性，你可以补一个带 `-webkit-` 前缀的样式，放在 `filter` 后面： ```html ... ``` # 原理我们使用了 CSS 特性 filter，并用了 [grayscale](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/grayscale) 对图片进行灰度转换，允许有一个参数，可以是数字（0到1）或百分比，0% 到 100% 之间的值会使灰度线性变化。如果你不想完全灰掉。可以设置个相对小的数字。掘金首页是设置了 0.95，也挺大的，看不出彩色。 # 兼容性我们使用了 CSS 特性 filter，兼容性还是不错的： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2320c42c793e47829fd953c3a8e6a7c6~tplv-k3u1fbpfcp-watermark.image?) 如果你想获得更好的兼容性，可以加一个前缀 `-webkit-`： ``` filter: grayscale(.95); -webkit-filter: grayscale(.95); ``` 这正是掘金的做法： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/998dd2071a5e4f989f729c3d0258b48b~tplv-k3u1fbpfcp-watermark.image?) 掘金是把样式加到了 html 元素上。 # filter 样式加到 `` 还是 `` 上我的小网页是把 filter 样式加到了 `` 元素上。通常这没有问题。 ```html ... ``` 但如果你的网页内有「绝对和固定定位」元素，一定要把 filter 样式加到 `` 上。原因见: https://drafts.fxtf.org/filter-effects/#FilterProperty 引用： > 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，除非 filter 对应的元素是「当前浏览上下文中的文档根元素」（即``）。因此，兼容性最好的方法是把 filter 样式加到 `` 上。这样不会影响「绝对和固定定位的后代」。这里小程序有个坑，如果你的页面代码有「绝对和固定定位的后代」，就不能把 filter 样式加到 `` 上，而是要找个元素，这个元素没有「绝对和固定定位的后代」，你可以把 filter 样式加到这个元素上。 # 写在最后我是HullQin，公众号**线下聚会游戏**的作者（*欢迎关注公众号，联系我，交个朋友*），转发本文前需获得作者[HullQin](https://juejin.cn/user/615367094054285/posts)授权。我独立开发了[《联机桌游合集》](https://juejin.cn/post/7090171872356089870)，是个网页，可以很方便的跟朋友联机玩斗地主、[五子棋](https://juejin.cn/post/7156253162272194590)、[象棋](https://juejin.cn/post/7153284516159684616)等游戏，不收费无广告。还独立开发了[《合成大西瓜重制版》](https://juejin.cn/post/7109867733260435469)。还开发了[《Dice Crush》](https://juejin.cn/post/7122345627307999263)参加Game Jam 2022。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：[《教你做小游戏》](https://juejin.cn/column/7091678846423924772)、[《极致用户体验》](https://juejin.cn/column/7087844977169924109)。