一行代码网页变灰,神奇的filter

背景

当遇到突如其来让网页变成黑白配色这样的需求,我们需要迅速完成变更并上线发布。

比如2022年12月1日,首页已经变成了黑白配色。


image.png

利用的是一行神奇的CSS代码:


image.png

一行代码

这是一行CSS代码:

filter: grayscale(1)

为了使整个网页生效,可以把这一行css代码放在 标签的样式里。直接写到 html 文件内,例如:


为了更好的兼容性,你可以补一个带 -webkit- 前缀的样式,放在 filter 后面:


原理

使用了 CSS 特性 filter,并用了 grayscale 对图片进行灰度转换,filter允许有一个参数,可以是数字(0到1)或百分比,0% 到 100% 之间的值会使灰度线性变化。

如果你不想完全灰掉。可以设置个相对小的数字。

兼容性

filter的兼容性还是不错的:

20160616102159950.jpg

filter 样式加到 还是

一般把 filter 样式加到了 元素上。通常是没有问题的。


但是,如果网页内有「绝对和固定定位」元素,则一定要把 filter 样式加到 上。

原因见: Graphic filters: the filter property

引用:


image.png

翻译:

若 filter 属性的值不是 none,会给「绝对和固定定位的后代」创建一个 containing block,除非 filter 对应的元素是「当前浏览上下文中的文档根元素」(即)。

因此,最好的方法是把 filter 样式加到 上并且加上-webkit。这样不会影响「绝对和固定定位的后代」。
但是小程序有个坑,如果你的页面代码有「绝对和固定定位的后代」,就不能把 filter 样式 加到 上,而是要找个元素,这个元素没有「绝对和固定定位的后代」,你可以把 filter 样式加到这个元素上。

你可能感兴趣的:(一行代码网页变灰,神奇的filter)