背景
当遇到突如其来让网页变成黑白配色这样的需求,我们需要迅速完成变更并上线发布。
比如2022年12月1日,简书首页已经变成了黑白配色。
利用的是一行神奇的CSS代码:
一行代码
这是一行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的兼容性还是不错的:
filter 样式加到 <html>
还是<body>
上
一般把 filter 样式加到了 <body> 元素上。通常是没有问题的。
<style>
body {
filter: grayscale(1) !import;
-webkit-filter:grayscale(1) !import;
}
</style>
但是,如果网页内有「绝对和固定定位」元素,则一定要把 filter 样式加到 <html> 上。
原因见: Graphic filters: the filter property
引用:
翻译:
若 filter 属性的值不是 none,会给「绝对和固定定位的后代」创建一个 containing block,除非 filter 对应的元素是「当前浏览上下文中的文档根元素」(即<html>)。
因此,最好的方法是把 filter 样式加到 <html> 上并且加上-webkit
。这样不会影响「绝对和固定定位的后代」。
但是小程序有个坑,如果你的页面代码有「绝对和固定定位的后代」,就不能把 filter 样式 加到 <page> 上,而是要找个元素,这个元素没有「绝对和固定定位的后代」,你可以把 filter 样式加到这个元素上。