最近几天，大家有没有发现大部分网站都瞬间变灰色了。
可能有许多小伙伴好奇这是怎样做到的？其实很简单，前端工程师们只需要一行代码就可以解决 。
我们只需要在网站的首页后台代码加入这么一段代码，就可以实现了！
<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%) | 饱和度 |
就这么简单。不妨大家都试一试。
下班~
