欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

网站都变成灰色，一行代码就搞定了！

发布时间：2023/12/20 编程问答 54 豆豆
生活随笔 收集整理的这篇文章主要介绍了 网站都变成灰色，一行代码就搞定了！ 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

文章目录

          • 一、主流网站主题分析
            • 1. 腾讯课堂
            • 2. bilibili
            • 3. CSDN
          • 二、默认样式
            • 2.1. 腾讯课堂
            • 2.2. bilibili
            • 2.3. CSDN
          • 三、 案例demo

一、主流网站主题分析

实现原理：在html标签上的class添加一个全局过滤器样式即可

1. 腾讯课堂

在html标签添加一个class，给class一个全局样式

class="global-gray" html.global-gray {-webkit-filter: grayscale(100%);filter: grayscale(100%);-webkit-filter: gray;filter: gray; }

2. bilibili
class="gray" html.gray {filter: grayscale(85%) saturate(80%);-webkit-filter: grayscale(85%) saturate(80%);-moz-filter: grayscale(85%) saturate(80%);-ms-filter: grayscale(85%) saturate(80%);-o-filter: grayscale(85%) saturate(80%);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=.85);-webkit-filter: grayscale(.85) saturate(.8); }

3. CSDN

给当前html标签添加全局过滤器

filter: grayscale(100%);

二、默认样式
2.1. 腾讯课堂

2.2. bilibili

2.3. CSDN

三、 案例demo

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

总结

以上是生活随笔为你收集整理的网站都变成灰色，一行代码就搞定了！的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。