背景
让网页变为黑白配色,是个常见的诉求。而且往往是突如其来的诉求,是无法预知的。当发生这样的需求时,我们需要迅速完成变更发布。
一行代码
这一行代码是个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 样式加到这个元素上。