侧边栏壁纸
博主头像
疯狂IT人博主等级

疯狂编程博客,分享IT编程的技术博客,用程序员视角总结分享IT编程和互联网知识的那些事儿。

  • 累计撰写 189 篇文章
  • 累计创建 20 个标签
  • 累计收到 3 条评论

目 录CONTENT

文章目录

代码示例:几行代码实现网站变灰效果

疯狂IT人
2022-12-01 / 0 评论 / 1 点赞 / 674 阅读 / 212 字 / 正在检测是否收录...

CSS灰度值

filter: grayscale 使用可以调整元素的灰度值

.big-event-gray {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

实践

以百度,B站,今日头条为例,大家有没有发现百度首页

<body class="big-event-gray">

B站首页中

<html class="gray">

和 今日头条

<html> 

标签中

如下图:
f7f3a930bf5b4487afb7450b79a8bf13_noop
2df84b8c79f44c02a0afd6ff2b61d085_noop
80837ca1087345cfbdb09916bb883e15_noop
就这么简单。

实战效果展示

养耳音乐网疯狂IT人博客

1

评论区