filter滤镜实现网页置灰（纪念日）效果

目录

• 前言
• 关键代码
• 兼容ie的做法
• 定位错乱的原因

前言

一些特殊纪念日的时候，很多网站的首页进行置灰处理。这种效果实际上是用滤镜filter实现的，几行css就可以实现。

在实现整个页面置灰的过程中，要注意页面中有定位的元素，就需要将css设置在html上面，否则定位就会出现错乱的现象，具体在下面的代码中讲解。

置灰后的页面效果：

关键代码

将下面css放入公用css中，在html上设置class属性为gray即可

注意：css尽量设置在html节点上

<style>
    html.gray {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
        filter: gray;
    }
</style>

兼容ie的做法

ie浏览器的有些版本是不支持以上的方式，可以使用蒙层简单的表示，这也是一些大型网站的做法：

html.ie-gray {
    background-color: #ddd;
    opacity: 0.5;
    filter: Alpha(opacity=50);
}

定位错乱的原因

如果页面中有固定定位或者绝对定位，如果在body上面设置filter滤镜，则定位的元素会出现错乱的现象。

原因：当在 body 中使用了 filter 滤镜属性的时候，会导致 fixed元素定位发生错误，即不再相对 viewport进行定位，而是相对整个网页（ body 元素）进行定位。

详细解释请参考这篇博客：https://juejin.cn/post/6844904117974859783

---

关注我，不迷路

小伙伴，用你可爱的小手，点个赞，关注我了解更多知识！！！

如果任何疑问的可以在评论区留言或者私聊。

更多前端、uniapp、nodejs等相关知识可关注我个人博客：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343