2020.4.4
今天是，2020年4月4日，星期六，清明节
当日全国举行哀悼日，各族人民深切悼念在抗击新冠肺炎疫情斗争中牺牲的烈士和逝世同胞。举国哀悼，愿逝者安息，愿生者奋发，愿祖国昌盛，致敬英雄！
今天早上看到许多网站包括主页和内容都已经变成了灰色，比如百度、今日头条、B站、CSDN等
B站官网
实现方法使用CSS-Filter属性
对于网页而言，页面色彩、布局等主要受到层叠样式文件CSS控制，网站页面整体色彩的改变可以通过CSS进行整体的控制。在CSS中可以通过filter滤镜属性实现对网页元素进行图像、背景及素材的渲染。
官方有一个 Demo，可以看下效果，如图所示
demo
此demo就通过
filter样式改变了图片、颜色、模糊、对比度等等信息其所有用法案例如下：
/*给SVG元素 <filter>引用滤镜, 如下*/
filter: url("filters.svg#filter-id");
/*给图像设置高斯模糊。值越大越模糊,默认是0*/
filter: blur(5px);
/*更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。没有设定值，默认是1*/
filter: brightness(0.4);
/*调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变,默认是1*/
filter: contrast(200%);
/*给图像设置一个阴影效果*/
filter: drop-shadow(16px 16px 20px blue);
/*将图像转换为灰度图像。值为100%则完全转为灰度图像，值为0%图像无变化,默认是0*/
filter: grayscale(50%);
/*给图像应用色相旋转。值为0deg，则图像无变化,超过360deg的值相当于又绕一圈,默认值是0deg*/
filter: hue-rotate(90deg);
/*反转输入图像。100%的价值是完全反转。值为0%则图像无变化,默认值是0*/
filter: invert(75%);
/*转化图像的透明程度。值为0%则是完全透明，值为100%则图像无变化,默认值是1*/
filter: opacity(25%);
/*转换图像饱和度。值为0%则是完全不饱和，值为100%则图像无变化,默认值是1*/
filter: saturate(30%);
/*将图像转换为深褐色。值为100%则完全是深褐色的，值为0%图像无变化,默认值是0*/
filter: sepia(60%);
/* Multiple filters */
/*你可以组合任意数量的函数来控制渲染。下面的例子可以增强图像的对比度和亮度*/
filter: contrast(175%) brightness(3%);
/* Global values */
filter: inherit;
filter: initial;
filter: unset;
大家可以参考官方的文档说明, 详见官方文档
网站置灰
再说回刚才的网站变成灰色，这里其实就是设置了 grayscale，其用法如下
filter:grayscale(percent)
将图像转换为灰度图像。值定义转换的比例。percent 值为 100%则完全转为灰度图像，值为0%图像无变化.
如果我们想要把全站变成灰色，再考虑到各浏览器兼容写法，可以参考下 CSDN 的写法：
.gray{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
这样想要变灰的节点只需要加上gray这个class就好了，比如加到html节点上就可以全站变灰了。
网友评论