前言
网站变灰
①B站
②爱奇艺
③ 腾讯视频
④ csdn
⑤百度
怎么实现的呢？
好奇心的驱使下，开始疯狂的询问度娘，果真还是找到了这么一个网站。
【https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter】
CSS属性 filter 的用法做了详细介绍，这里截取几个重要部分出来，对filter属性感兴趣的小伙伴可以在以上官网查看详细内容
② 简介
③ 语法格式
/* URL to SVG filter */
filter: url("filters.svg#filter-id";
/* <filter-function> values */
filter: blur(5px;
filter: brightness(0.4;
filter: contrast(200%;
filter: drop-shadow(16px 16px 20px blue;
filter: grayscale(50%;
filter: hue-rotate(90deg;
filter: invert(75%;
filter: opacity(25%;
filter: saturate(30%;
filter: sepia(60%;
/* Multiple filters */
filter: contrast(175% brightness(3%;
/* Use no filter */
filter: none;
/* Global values */
filter: inherit;
filter: initial;
filter: revert;
filter: unset;
④ 样例
来看看网站有没有用CSS filter
f12 呼出开发者工具，发现确实有如下样式
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;
}
没添加CSS样式的样子
好家伙，还真变成全灰的了
CSS样式兼容性
下面是官方给出的各个浏览器兼容情况
本期内容就到这了，我们下期再见(●'◡'●