国家公祭日，怎样一行 CSS 让整站变灰

国家公祭日当天，各大电商、娱乐等网站为了追忆逝者，缅怀英烈将整个网站页面设置成灰白色调。有一些学习前端的小伙伴看到就不禁思考如何实现。

哔哩哔哩 - 追悼
哔哩哔哩 - 追悼

我们先看看filter滤镜有哪些属性。

属性 说明
blur 将高斯模糊应用于输入图像
brightness 将线性乘法器应用于输入图像，以调整其亮度
contrast 调整输入图像的对比度
drop-shadow 使用 参数沿图像的轮廓生成阴影效果
grayscale 将图像转换为灰度图
hue-rotate 应用色相旋转
invert 反转输入图像
opacity 应用透明度
saturate 改变图像饱和度
sepia 将图像转换为深褐色

具体描述可以查看 MDN - filter

想要实现上面的CSS效果，我们可以使用filter的grayscale函数实现。

具体代码

        

          
            
            CSS
          
          
        

        

          
12345678

          body {
    filter: grayscale(100%);
    /* 兼容不同浏览器 */
    -o-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
}

我们只需要在body元素上添加filter属性，然后设置其值为grayscale(100%)就可以实现效果。

滤镜
滤镜