网站变成灰色(置灰)

大家都感受到了，很多网站、APP 在最近都变灰了。

先来感受一下变灰后的效果。

 

 

这种灰色的效果怎么实现的呢？如何做到图片、文字、按钮都变灰的效果呢？

方案 1，换一套灰色的 UI，那显然成本太大了，方案不可取。

方案 2，使用CSS函数

-webkit-filter: grayscale(1);
filter: grayscale(1);

百度一下看看 filter: grayscale(1)的意思。

 MDN地址 https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/grayscale
 https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function

可以看到的是

 

 

MDN 是怎么解释 grayscale() 函数呢？

The grayscale() CSS function converts the input image to grayscale. Its result is a .

大致的意思就是，grayscale 是一个 CSS 函数，可以把图像转成灰色，参数是个数值或百分比，结果返回一个 filter 函数。

The CSS data type represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter properties.

filter 函数可以用来改变图像的显示效果，用于 CSS 的 filter 属性。 除了 grayscale 函数，可选项还有以下这些：具体更多可以参考MDN

 具体实现就是将该段代码写入到html标签上

-webkit-filter: grayscale(1);
filter: grayscale(1);

具体如图：