布景

让网页变为是非配色，是个常见的诉求。并且往往是突如其来的诉求，是无法预知的。当产生这样的需求时，咱们需求迅速完结变更发布。

2022年12月1日，主页已经变成了是非配色。

我的小网站主页 game.hullqin.cn 也变成了是非配色。

一行代码

这一行代码是个CSS代码：

filter: grayscale(1)

为了使整个网页收效，你能够把它放在 <html> 标签的款式里。直接写到 html 文件内，例如：

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

你也能够用内联款式，只要没用 important CSS 语法，内联款式优先级最高：

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

为了更好的兼容性，你能够补一个带 -webkit- 前缀的款式，放在 filter 后面：

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

原理

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

假如你不想完全灰掉。能够设置个相对小的数字。

主页是设置了 0.95，也挺大的，看不出五颜六色。

兼容性

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

一行代码，让网页变为是非配色

假如你想取得更好的兼容性，能够加一个前缀 -webkit-：

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

这正是的做法：

一行代码，让网页变为是非配色

是把款式加到了 html 元素上。

filter 款式加到 <html> 还是 <body> 上

我的小网页是把 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，除非 filter 对应的元素是「当前阅读上下文中的文档根元素」（即<html>）。

因而，兼容性最好的方法是把 filter 款式加到 <html> 上。这样不会影响「肯定和固定定位的子孙」。

这儿小程序有个坑，假如你的页面代码有「肯定和固定定位的子孙」，就不能把 filter 款式 加到 <page> 上，而是要找个元素，这个元素没有「肯定和固定定位的子孙」，你能够把 filter 款式加到这个元素上。

写在最后

我是HullQin，大众号线下集会游戏的作者（欢迎重视大众号，联络我，交个朋友），转发本文前需取得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，能够很方便的跟朋友联机玩斗地主、五子棋、象棋等游戏，不收费无广告。还独立开发了《组成大西瓜重制版》。还开发了《Dice Crush》参与Game Jam 2022。喜欢能够重视我噢～我有空了会分享做游戏的相关技能，会在这2个专栏里分享：《教你做小游戏》、《极致用户体验》。本文正在参与「金石计划 . 瓜分6万现金大奖」