实现网页整体置灰（默哀日）

在各种默哀日，APP的界面会有一个整体置灰的效果，起初我以为他们是有多套图片和多套文字样式。但是后来我想到这样做太复杂了，就去搜索了下，发现只需要css的一个filter(滤镜属性)就可以达到这个效果。

filter语法

filter定义了内容的可视效果。

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

具体每个方法的显示效果，这里就不一一列举出来了。详情可以查看：https://www.runoob.com/cssref...

我在我本地试了下filter: grayscale();

css代码：

body {
        -webkit-filter: grayscale(100%);
        /* Chrome, Safari, Opera */
        filter: grayscale(100%);
      }

呈现结果：

正常的呈现结果：

需要注意的一点是，使用了filter的元素的子元素的position：fixed将不再起作用。

使用filter 不会影响元素原来的交互效果和原来的点击事件。