阅读本文大概需要1.31 分钟。
最近想必大家都感受到了，很多网站、APP 在昨天都变灰了，变灰的原因是为了纪念一位伟人。
如果没有看到，先来感受一下效果。
百度
知乎
B站
当大家看到全站的内容都变成了灰色，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？
有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，地主家的傻儿子也不能这么干，而且万一某个控件忘记加灰色样式了岂不是太突兀了。
那我们的办法是：你猜对了，魔法！在浏览器按下 F12，打开开发者模式，用元素定位器找到最外层的 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);打开 JavaPub 的《最少必要面试题》网站 ，可以看到页面是正常颜色。
把这段代码加上看看效果，然后变成灰色系了。
那这段代码是什么意思呢？
filter: grayscale 复制到Google搜索引擎看看
测试一下效果，参数为0时，样式正常颜色。
然后依次试一下60% 。
100%。
filter 属性是前端技术CSS的功能之一它主要的作用是为图片、背景和边框添加模糊、颜色、饱和度等可视效果。除了 grayscale 函数，可选项还有以下这些：
<!-- 给图像设置高斯模糊 -->
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(%)目前支持以下浏览器，第一个字段是版本号。
苟利国家生死以，岂因祸福避趋之！🕯 感谢他为中国的发展所做出的一切！
— 完 —
JavaPub首发原创电子书、《最少必要面试题》持续更新中
