前言
2020年4月4日早上10点 , 全国性哀悼活动正式开展 , 在向逝去的生命和前线壮烈牺牲的烈士致哀同时 , 依旧不忘加班 , 如往常打开浏览器 , 然后发现 , 基本上所有的网站都变灰了 , 在哀伤的同时 , 就想到一个问题 , 这样全部颜色和交互效果都变灰了 , 到底是怎么做的 , 具体的工作量是多大呢 ? 带着这个问题 , 我开始我的探索之旅
先来几张已经发生底色改变的网站
CSDN
百度
依然是一样灰色调
博客园
依然是一样灰色调
知乎
知乎居然没做出改变
依然是一样灰色调
B站
还是熟悉的灰色调
淘宝
依然是灰色调
基于现象剖析
以上就是部分网站的情况 , 很明显 , 这个底色改变 , 仿佛所有网站都出现了 , 这样做出改变 , 对于程序员来说 , 工作量会不会很大呢 , 带着这个疑问 , 我打开了控制台
那么分析问题怎么开展呢 ?
既然是整个页面都是灰色调 , 那么就可以直接了当的从html节点开始查看了
首先我打开了CSDN控制台 , 查看html节点 , 果不其然 , 我们可以看到一个熟悉的身影 , 一个css3的新属性filter(后面会讲) , 简单来说就是一个滤镜效果的css熟悉
然后尝试把这个属性取消掉 , 原色调的CSDN就回来了
按照这个尿性 , 我打开了百度的控制台 , 发现百度是没有放在html标签上面的 , 那么我就开始寻找引入进来的css文件 , 先从头部的css文件找齐
一顿分析可以得知filter很大可能在 , id为css_index的标签里面(这就是html语义化的优点) , 然后我们拿到这个id="css_index"标签下所有的css属性 , 粘贴到我们的本地
拉取到本地的css文件出现了两处filter , 暴力处理 , 把两处filter删除 , 然后再替换百度首页的对应的css文件
原色调的百度首页回来了
其他的网站有些是静态资源服务器返回来的文件 , 就没有去做改变了 , 这里我们就改变网站基色调的是一个filter属性 , 那么filter属性是怎么样的呢
分析filter属性
先看看MDN是怎么解释filter的
filterCSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG滤镜，通过一个URL链接到SVG滤镜元素(SVG filter element)。
filter: url("../../media/examples/shadow.svg#element-id");
filter: blur();
filter: contrast();
filter: grayscale();
filter: hue-rotate();
filter: drop-shadow() invert();
filter: url("../../media/examples/shadow.svg#element-id");
URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素.
filter: blur(5px);
给图像设置高斯模糊。“radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
filter: blur(5px); // 模糊度 , 数值越大越模糊
filter: contrast();
颜色反差
调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
filter: contrast(0%);
filter: contrast(1500%);
filter: grayscale();
将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。
filter: grayscale(); 灰度 , 有效值为 ( 0%, 100% )
filter: hue-rotate(90deg);
给图像应用色相旋转。“angle”一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
filter: hue-rotate(100deg); 色调旋转
具体的属性及实现可以查看
https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
浏览器支持度
我们看看这个属性的浏览器支持度
ie11以下是不支持的 , EDGE不知道支不支持 , 我电脑没有 , 所以就没办法确定
我们用ie浏览器打开以下
果然是不支持的
总结
很多时候 , 当遇到一些节日或者纪念日或者活动的时候 , 我们的网站整体色调就要发生改变 , 我们要尽量使用一些css3的属性 , 减少已经落地的项目的代码侵入 , 今天哀悼日的基础灰色调 , 就是依赖filter属性实现的 , 继续需要保持对新特性的高敏感度