背景
当遇到突如其来让网页变成黑白配色这样的需求，我们需要迅速完成变更并上线发布。
比如2022年12月1日，简书首页已经变成了黑白配色。
image.png
利用的是一行神奇的CSS代码：
image.png
一行代码
这是一行CSS代码：
filter: grayscale(1)
为了使整个网页生效，可以把这一行css代码放在 <html> 标签的样式里。直接写到 html 文件内，例如：
<style>
html {
filter: grayscale(1) !important;
}
</style>
为了更好的兼容性，你可以补一个带 -webkit- 前缀的样式，放在 filter 后面：
<style>
html {
filter: grayscale(1) !important;
-webkit-filter:grayscale(1) !important;
}
</style>
原理
使用了 CSS 特性 filter，并用了 grayscale 对图片进行灰度转换，filter允许有一个参数，可以是数字（0到1）或百分比，0% 到 100% 之间的值会使灰度线性变化。
如果你不想完全灰掉。可以设置个相对小的数字。
兼容性
filter的兼容性还是不错的：
20160616102159950.jpg
filter 样式加到 <html> 还是<body>上
一般把 filter 样式加到了 <body> 元素上。通常是没有问题的。
<style>
body {
filter: grayscale(1) !import;
-webkit-filter:grayscale(1) !import;
}
</style>
但是，如果网页内有「绝对和固定定位」元素，则一定要把 filter 样式加到 <html> 上。
原因见: Graphic filters: the filter property
引用：
image.png
翻译：
若 filter 属性的值不是 none，会给「绝对和固定定位的后代」创建一个 containing block，除非 filter 对应的元素是「当前浏览上下文中的文档根元素」（即<html>）。
因此，最好的方法是把 filter 样式加到 <html> 上并且加上-webkit。这样不会影响「绝对和固定定位的后代」。
但是小程序有个坑，如果你的页面代码有「绝对和固定定位的后代」，就不能把 filter 样式 加到 <page> 上，而是要找个元素，这个元素没有「绝对和固定定位的后代」，你可以把 filter 样式加到这个元素上。
网友评论