如何用一行代码实现网站变灰色

近几天，大家有没有发现大部分网站都瞬间变灰色了。可能有很多同学好奇，众多网站变灰是怎样做到的？难道是将用户界面一个一个进行PS吗？

其实并不用如此麻烦，我们在前端技术里只需要一段简单的代码就可以实现这种效果。以我的博客网站为例，我们通过谷歌浏览器打开网站，按下F12，打开开发者控制台，通过element-style查找filter可以找到一段代码，它就是将网页变灰的幕后“灰”手，那filter是什么呢？它还有什么其他的作用呢？小编就带同学们一起了解一下。

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

如下图所示：

查看变灰效果：

什么是filter

filter属性是前端技术CSS的功能之一它主要的作用是为图片、背景和边框添加模糊、颜色、饱和度等可视效果。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号，目前主流的浏览器都支持filter。

filter效果

我们在页面变灰效果上主要使用的就是filter：grayscale(%)，当%为0时，页面颜色是正常的，当%为100%时，页面就完全转成灰色，我们在日常使用时可以将参数设置成自己想要的效果。

当然filter除了可以改变灰度还可以实现以下功能:

<!-- 给图像设置高斯模糊 -->
filter:blur(px)

<!-- 给图像设置亮度 -->
filter:brightness(%)

<!-- 调整图片对比度 -->
filter: contrast(%)

<!-- 添加阴影效果 -->
filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 1));

<!-- 调整图片透明度 -->
filter: opacity(%);

<!-- 调整图片灰度 -->
filter: grayscale(%);<!-- 调整图片反色 -->filter: invert(%);

<!-- 色相旋转 -->
filter:hue-rotate(deg);

<!-- 调整图片饱和度 -->
filter: saturate(%);

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