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

最新推荐文章于 2024-08-03 23:03:36 发布

尤雨溪般的艺术编程者

最新推荐文章于 2024-08-03 23:03:36 发布

阅读量2.3k

点赞数 3

分类专栏：必备技巧经验分享文章标签： css firefox safari

本文链接：https://blog.csdn.net/SOLar7SysteM/article/details/128125810

版权

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

12 篇文章 0 订阅

订阅专栏

必备技巧

4 篇文章 0 订阅

订阅专栏

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

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

官方Demo

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

今天很多网站都变灰了，比如简书、B 站、爱奇艺、CSDN 、百度等等。
我们选择一个网站，比如 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>

尤雨溪般的艺术编程者

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
解决或者设置网页变灰-CSS-filter属性-哀悼

我们选择一个网站，比如 B 站吧，打开浏览器开发者工具。审查一下网页的源代码，我们可以发现在 html 的这个地方多了一个疑似的 class，叫做 gray（灰色）filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。今天很多网站都变灰了，比如简书、B 站、爱奇艺、CSDN 、百度等等。
复制链接

扫一扫

专栏目录