环境
让网页页面变成黑白配色，是一个普遍的诉求。并且通常是始料未及的诉求，是无法预知的。当出现这种要求时，我们应该快速进行变动公布。
2022年12月1日，AdminJS主页已经成为了黑白配色。
我的一个首页 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% 中间数值会让灰度值线形转变。
如果不想彻底灰掉。能设个相对性小的数字。
AdminJS主页是设置权限 0.95，也挺大的，看不出来五颜六色。
兼容模式
大家用了 CSS 特点 filter，兼容模式还是很不错的：
如果你想要得到更好的兼容模式，能够加一个作为前缀 -webkit-：
filter: grayscale(.95);
-webkit-filter: grayscale(.95);
这便是AdminJS的处理方式：
AdminJS就是将款式加到 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个栏目里共享：《教你做小游戏》、《极致用户体验》。文中已经参与「 . 」