filter滤镜实现网页置灰(纪念日)效果

Source

目录

前言

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

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

置灰后的页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/07a825d086744e6b913f542758f4c919.png#pic_center

关键代码

将下面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