无锡网站建设方案服务,制作好看的wordpress页面,移动网站建设是什么,服装外贸网站建设文章目录一、主流网站主题分析1. 腾讯课堂2. bilibili3. CSDN二、默认样式2.1. 腾讯课堂2.2. bilibili2.3. CSDN三、 案例demo一、主流网站主题分析 实现原理#xff1a;在html标签上的class添加一个全局过滤器样式即可 1. 腾讯课堂
在html标签添加一个class#xff0c;给cl…
文章目录一、主流网站主题分析1. 腾讯课堂2. bilibili3. CSDN二、默认样式2.1. 腾讯课堂2.2. bilibili2.3. CSDN三、 案例demo一、主流网站主题分析 实现原理在html标签上的class添加一个全局过滤器样式即可 1. 腾讯课堂
在html标签添加一个class给class一个全局样式
classglobal-grayhtml.global-gray {-webkit-filter: grayscale(100%);filter: grayscale(100%);-webkit-filter: gray;filter: gray;
}2. bilibili
classgrayhtml.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/svgxml;utf8,svg xmlnshttp://www.w3.org/2000/svgfilter idgrayscalefeColorMatrix typematrix values0.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
