伊人博客 一款有技术又有生活的博客

在网站悼念变灰实践过程中,filter导致网页显示异常情况解决

发布时间:2022-12-03 10:42:06 标签:filter,fixed,body | 阅读(257)

为了悼念国家领导人,我自愿将网站所有内容变灰,由于之前没有这个功能,所以研究了一下,发现可以通过filter来实现此功能,但在实践过程中,发现了一个问题:

<style>
    body{
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
    }
</style>

设置之后出现如下图问题:

Animation.gif

设置filter之后,body竟然无法对齐了,而且fixed导航栏也不会跟着浮动了。

解决方案:

<style>
    html{
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
    }
</style>


原创文章如转载,请注明出处“伊人博客

站内搜索
关注公众号(随时搜索)
文章归档
热门推荐
随机推荐
冷门晾晒