用css实现PS的滤镜效果~grayscale(%) 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度

今天是2020年4月4日，为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼，各个网站整体都变成了灰色，在掘金看到一篇文章明天全国哀悼日，一段css让全站变灰

$\color{red}{发现了css一个有趣的属性fiter(滤镜)}$ ，以后可以用一句css代码就实现图片加上滤镜效果啦,以下是我的test结果:

左边：我的微信头像原图是这样的右边:加上了 $\color{red}{filter: grayscale(100 \%);}$
grayscale(%) 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

还有一个好玩的属性invert

左边：我的微信头像原图是这样的右边:加上了 $\color{red}{filter: invert(100 \%);}$
invert(%) 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。若值未设置，值默认是0。

左边：我的微信头像原图是这样的右边:加上了 $\color{red}{filter: hue-rotate(90deg);}$
hue-rotate(deg) 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

左边：我的微信头像原图是这样的右边:加上了 $\color{red}{filter: sepia(100\%);}$
sepia(%) 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

更多的属性在这里，快动手试试吧~