解决或者设置网页变灰-CSS-filter属性-哀悼

最新推荐文章于 2025-10-01 22:32:48 发布

原创最新推荐文章于 2025-10-01 22:32:48 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #firefox #safari

经验分享同时被 2 个专栏收录

12 篇文章

订阅专栏

必备技巧

4 篇文章

订阅专栏

本文介绍了如何使用CSS filter属性使网页变灰的技术实现方法。通过分析B站等网站的源代码，展示了具体实现过程及兼容性解决方案。

网页变灰
在这里插入图片描述

网页恢复
在这里插入图片描述
CSS filter
filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

官方Demo

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

今天很多网站都变灰了，比如简书、B 站、爱奇艺、优快云、百度等等。
我们选择一个网站，比如 B 站吧，打开浏览器开发者工具。审查一下网页的源代码，我们可以发现在 html 的这个地方多了一个疑似的 class，叫做 gray（灰色）

代码实例

<!--放到<head></head>之间即可-->
  <style type="text/css"> 
    html{ 
    filter: grayscale(100%); /* 标准写法 just for IE6-9 */ 
    -webkit-filter: grayscale(100%); /* webkit 内核支持程度较好 */
    -moz-filter: grayscale(100%); /* 其他内核现在并不支持，为了将来兼容性书写 */
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
    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");  /* Firefox 3.5+ */
    }
</style>