Question

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

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

这是我到目前为止尝试过的：

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

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

使用纯CSS甚至可以做到吗？

Answer 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>

希望这会有所帮助！

Answer 2

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

更新：@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>

Answer 3

尝试

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

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

纯CSS是否有可能获得背景模糊效果？

3 个答案: