前言
这两天,我们经常逛的好多网站、app首页都变灰了,原因大家应该都知道了
网站变灰
①B站
![这是B站](http://blog.xiezhrspace.cn/blog-img/7288391a82084881bc056ebfd2b32861.png)
②爱奇艺
![这是爱奇艺](http://blog.xiezhrspace.cn/blog-img/1ba34fc1a4cb4a19ac9feb6530158382.png)
③ 腾讯视频
![这是腾讯视频](http://blog.xiezhrspace.cn/blog-img/0414e9a7e3cd405aa70e7bde192ccf42.png)
④ csdn
![这是csdn](http://blog.xiezhrspace.cn/blog-img/89b98fc35b774f709d9f15d564fcc055.png)
⑤百度
![这是百度](http://blog.xiezhrspace.cn/blog-img/0b21a93bce434a9db132b0c000c0777c.png)
怎么实现的呢?
难道这些网站开发商在网站开发的时候都准备一套灰色主题的UI么?
好奇心的驱使下,开始疯狂的询问度娘,果真还是找到了这么一个网站。
①官方文档地址
【https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
】
网站这个页面对CSS
属性 filter
的用法做了详细介绍,这里截取几个重要部分出来,对filter
属性感兴趣的小伙伴可以在以上官网查看详细内容
② 简介
CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。
③ 语法格式
filter: url("filters.svg#filter-id");
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%);
filter: contrast(175%) brightness(3%);
filter: none;
filter: inherit;
filter: initial;
filter: revert;
filter: unset;
④ 样例
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/065492fa49a244178483fec115dfd130.png)
来看看网站有没有用CSS filter
我们打开B站首页,然后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);
}
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/88c7bcb9154e4cd9874e8f481c80813a.png)
找到了样式,那么接下来我们拿个人小破站【www.xiezhrspace.cn】试试效果
没添加CSS样式的样子
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/f001531ef3b44df2aff2a05d3759743c.png)
添加CSS样式之后
![在这里插入图片描述](http://blog.xiezhrspace.cn/blog-img/72ca768513834a37aedaffe36e3da0b4.png)
好家伙,还真变成全灰的了
CSS样式兼容性
个人试了谷歌浏览器、火狐浏览器都是可以通过以上CSS样式实现网页变灰的,IE亲测不行。
下面是官方给出的各个浏览器兼容情况
![兼容性](http://blog.xiezhrspace.cn/blog-img/ac84b15255784ddabf56d9604897eb5d.png)
原以为很难实现的功能,原来只需要几行代码就实现了。
本期内容就到这了,我们下期再见(●’◡’●)