【UI】 网站都变成灰色了，它是怎么实现的？

最近几天，大家有没有发现大部分网站都瞬间变灰色了。

可能有许多小伙伴好奇这是怎样做到的？其实很简单，前端工程师们只需要一行代码就可以解决 。

我们只需要在网站的首页后台代码加入这么一段代码，就可以实现了！

<style type="text/css">
	html {
	  filter: grayscale(100%);
	}
</style>

vue项目的话，直接把代码加在public/index.html 里面就行
见变灰效果：

想要去掉灰色的话，把代码删了就行。

filter属性值对应的效果

属性值	效果
grayscale(100%)	对图片进行灰度转换
blur(2px)	模糊
brightness(25%)	亮度
contrast(50%)	对比度
drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5))	阴影
opacity(50%)	透明度
sepia(100%)	褐色
invert(100%)	反色
hue-rotate(180deg)	色相旋转
saturate(1000%)	饱和度

就这么简单。不妨大家都试一试。
下班~