大家好，欢迎来到IT知识分享网。
背景
让网页变为黑白配色，是个常见的诉求。而且往往是突如其来的诉求，是无法预知的。当发生这样的需求时，我们需要迅速完成变更发布。
2022年12月1日，各大网站首页已经变成了黑白配色。
一行代码
这一行代码是个CSS代码：
filter: grayscale(1)
复制代码IT知识分享网
为了使整个网页生效，你可以把它放在 <html> 标签的样式里。直接写到 html 文件内，例如：
IT知识分享网<style>
html {
filter: grayscale(1);
}
</style>
复制代码
你也可以用内联样式，优先级最高：
<html style="filter:grayscale(1)">
...
</html>
复制代码为了更好的兼容性，你可以加一下前缀：
IT知识分享网<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，除非它适用的元素是当前浏览上下文中的文档根元素（即<html>）。
因此，兼容性最好的方法是把 filter 样式加到 <html> 上。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/6972.html
