【问题标题】:Positon Fixed is not working with CSS blur Filter [duplicate]固定位置不适用于 CSS 模糊过滤器 [重复]
【发布时间】:2018-11-09 09:35:50
【问题描述】:

我有一个非常简单的例子的简单问题,

我在body标签上添加了filter: blur(2px);,在ul标签上固定的那个位置停止工作之后。它表现为绝对位置。当你从身体上取下那个过滤器时,一切都会变得正常。有什么建议吗?

JSFIDDLE

【问题讨论】:

    标签: css filter css-transitions blur


    【解决方案1】:

    您可以将过滤器添加到html标签中,而不是模糊body标签,这将继承所有子元素。

    html{
      filter: blur(2px);
    }
    

    您可以添加更多信息,说明您试图实现的模糊整个页面,也许我们可以找到更好的解决方案。

    Here你有一篇文章解释了body标签和html标签的区别

    【讨论】:

    • 我看到了你的解决方案,但问题是为什么它不能在 body 标签上工作,除了 body 你在任何具有固定 css 的子元素上实现它会导致问题
    • 刚刚对一篇文章进行了编辑。如果您将过滤器添加到 body 元素,它将覆盖整个页面,您正在滚动过滤器,这就是问题所在,如果 html 元素上有背景,则 body 背景的行为就像任何其他元素一样。
    • 是的,我知道,但问题是我们怎样才能避免这样的冲突
    • 我误解了这个问题,很抱歉,看起来这是一些谷歌浏览器和火狐版本的错误,检查这个问题 -> stackoverflow.com/questions/51589185/…,我在 Safari 上测试了相同的代码并且它工作好吧。
    • @FedericoMartin 这不是错误,而是功能:stackoverflow.com/questions/52937708/…
    猜你喜欢
    • 2021-06-18
    • 1970-01-01
    • 1970-01-01
    • 2016-06-14
    • 2016-10-07
    • 2022-11-10
    • 1970-01-01
    • 1970-01-01
    • 2023-03-25
    相关资源
    最近更新 更多