网页变为黑白配色,一行代码解决

最新推荐文章于 2023-03-08 23:16:01 发布

Jim-zf

最新推荐文章于 2023-03-08 23:16:01 发布

阅读量396

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_46600931/article/details/128142563

版权

伟人仙逝，国家半旗，所有网站都变成了灰色

背景

让网页变为黑白配色，是个常见的诉求。而且往往是突如其来的诉求，是无法预知的。当发生这样的需求时，我们需要迅速完成变更发布

只需要css一行代码

filter: grayscale(1)

只需要再HTML标签设置就可以

<style>
html {
  filter: grayscale(1);
}
</style>

或行内样式

<html style="filter:grayscale(1)"> //兼容 style="filter:grayscale(1);-webkit-filter:grayscale(1)"
.
.
.
</html>

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

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

掘金首页是设置了 0.95，也挺大的，看不出彩色。

注意：filter最好加到html，而不是body，加到body会引起postion失效

关注