CSS3学习与总结 · filter滤镜让个人网站一秒变成灰色系列

2021年12月13日是第八个 国家公祭日 ， 悼血与火浸染之地，祭抗战死难之生灵 ，国家各种官网和各大在线电商，都把网站设置为灰色系列，以此来悼念历史，缅怀先烈。本文就介绍一下使用CSS3的filter滤镜属性让个人网站一秒变成灰色系列的具体方法。

filter(滤镜) 属性

定义： filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

grayscale(%)值： 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。

灰色系列实现

给html元素设置filter属性

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

提示： 可能有会给body元素添加filter属性，确实也可以做到同样的效果，但是如果页面中有fixed固定定位的元素或内容，会出现定位失效的问题，因此建议直接给html元素加filter属性。

就是这么简单，网站瞬间变成灰色系列，很神奇有木有。

祀我国殇，慰我英魂

---

欢迎访问：天问博客

本文作者： Tiven
发布时间： 2021-12-13
最后更新： 2023-07-17
本文标题： CSS3学习与总结 · filter滤镜让个人网站一秒变成灰色系列
本文链接： https://www.tiven.cn/p/a58442ee/
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！