一行 CSS 让整站变灰

原创

一行 CSS 让整站变灰

共 993 字，需阅读 2 分钟

2019/09/10 上午

413 次阅读

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

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

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

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

具体描述可以查看 MDN - filter

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

#具体代码

          1
2
3
4
5
6
7
8
          body {
    filter: grayscale(100%);
    /* 兼容不同浏览器 */
    -o-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
}