是否可以使用纯 CSS 获得背景模糊效果？ [复制]答案

【问题标题】：Is it possible to get a background blur effect with pure CSS? [duplicate]是否可以使用纯 CSS 获得背景模糊效果？ [复制]
【发布时间】：2019-01-22 16:54:39
【问题描述】：

在创建我的新网站时，我偶然发现了这个问题：

我希望我网站导航栏后面的所有内容都变得模糊。这必须是动态的，这意味着如果用户滚动导航栏下的内容会变得模糊。您可以在the Apple homepage 上查看效果，使用他们的导航栏。

这是我迄今为止尝试过的：

.div {
   filter: blur(10px);
}
<div>
   -code of navbar-
</div>

但是，这会导致导航栏模糊，而不是导航栏下方的内容。

这甚至可以用纯 CSS 实现吗？

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
看问题是，你需要展示你的努力。 minimal reproducible example 通常是最好的方法，这样我们就可以知道您正在使用什么、您尝试过什么以及您遇到的问题。你现在拥有的东西太宽泛和模棱两可了。
@ValentinWalter 查看我更新的答案。另外，请注意这里的所有答案实际上都是正确的，但他们无法为您编写代码。在问这个问题之前，你需要做更多的研究。希望它可以帮助您下次提出更好的问题。到那时，尽情探索 CSS 过滤器吧！

标签： html css background

【解决方案1】：

用它来做背景模糊：-

<style>
    .mydiv {
        //Set Blur value
        filter: blur(2px);
    }
</style>
<body>
    <!--Path of Image and its width and height-->
    <div style="background-image:url('ascii.png');width:1440px;height:900px;" class="mydiv">
   </div>
</body>

希望这会有所帮助！！！

【讨论】：

【解决方案2】：

试试

.mydiv {
  filter: blur(2px);
  font-size: 40px;
}

<div class="mydiv">
xyz
</div>

【讨论】：

【解决方案3】：

是的。使用过滤器属性。浏览器支持仍然有点参差不齐。

更新：@ValentinWalter 您需要使用另一个元素来保存图像，并使其模糊。过滤器对 dom 元素进行操作，因此如果将其应用于导航栏，则整个导航栏将变得模糊。另外，请记住，模糊有相关的成本 - 图像模糊得越多，计算机处理的负担就越大。

话虽如此，这里有一个小例子来说明你应该做什么： https://codesandbox.io/s/8lmw5j2qq8

本质上，将模糊应用于导航栏内的绝对定位元素。

.navbar {
  position: relative;
  overflow: hidden;
}
.blur {
  filter: blur(10px);
  position: absolute;
  top: 0;
  left: 0;
}
<div class="navbar">
  <div class="blur"></div>
  ...
</div>

【讨论】：

感谢您花时间回答。看起来这将解决我的问题。不过我有一个问题：这可以是动态的，以便在滚动导航栏下方的内容时变得模糊吗？
哈哈，我知道这就是你真正想要的。很不幸的是，不行。 在 HTML/JS 中没有简单的方法可以做到这一点，除非你在 javascript 画布中渲染你的整个应用程序 - 但是你会遇到更糟糕的问题，比如自己管理布局等。