'清明时节雨纷纷' 关于web网站主题置灰

今天过清明了，全国人民为在疫情中逝去的和在火灾中以及其他各个灾难中逝世的人们默哀…

国家降半旗、默哀、电视剧停播、网站和app换上了庄重的灰色。

今天想要说的是关于网站变换主题。

1.CSDN

1）csdn首先取消了body元素的背景图片(卸下所有背景相关属性)，让网页主体背景恢复为默认的白色。background: 0 0!important;

2）使用了滤镜功能(这和我一开始想的做法一样)

给html标签添加样式：

-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);
}

2.baidu

baidu也是使用了filter样式，只不过他只给id为result_logo的logo添加了这个样式。

3.然后我发现有道笔记的md文件代码样式也前部变灰？？不知道是错觉还是他们把代码样式的颜色置灰了…（是错觉）

4.qq音乐网站也是用的filter,然后推荐了一些关于疫情的歌曲，封面选用了灰色的图片; qq音乐app也90%的部分变灰(还残留部分原谅色)，APP上应该只是替换了一些灰色图片，其他的没有变化，毕竟纯ios或者Android使用滤镜功能比较繁琐。不过采用内嵌web的方式再使用filter应该也能行。

综上觉得使用css的滤镜功能是最方便快捷的方法。

filter相关属性值：

filter: none | blur() 高斯模糊 | brightness() 亮度| contrast() 对比度| drop-shadow() 阴影效果 | grayscale() 灰度 | hue-rotate() 色相旋转| invert() 反转| opacity() 透明度 | saturate() 饱和度 | sepia() 深褐色| url() 指定一个具体的滤镜元素;

例如：

/*变亮:*/
  -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
   filter: brightness(200%);

/*阴影效果:*/
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
 filter: drop-shadow(8px 8px 10px red);

/*上述的灰度:*/
 -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
 filter: grayscale(50%);

/*饱和度:*/
 -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
 filter: saturate(800%);