如何在 css 中的导航栏上应用模糊效果

阿卜杜勒赫曼·埃尔马迪

我想创建一个类似于在苹果网站上找到的导航栏,
目前我能找到的是如何在图像上应用模糊,但我希望将模糊应用于导航栏后面的任何内容

我尝试使用 svg 过滤器,但它对导航栏的内容应用了模糊,而不是它后面的内容

<style>
  .container {
    height: 100vh;
    width: 100vw;
  }
  .blur {
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
    -webkit-filter: url(#blur-filter);
    filter: url(#blur-filter);
    -webkit-filter: blur(3px);
    filter: blur(3px);
  }
  .blur-svg {
    display: none;
  }
  .navBar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    z-index: 1;
    background-color: rgba(20, 20, 20, 0.2);
  }
</style>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="blur-svg">
  <defs>
    <filter id="blur-filter">
      <feGaussianBlur stdDeviation="3"></feGaussianBlur>
    </filter>
  </defs>
</svg>
<div class="navBar blur">test</div>
<div class="container">
  <h3>Example</h3>
  <p>This example shows the effect.</p>
</div>
伊姆兰·拉菲克

使用backdrop-filter属性来执行此操作或使用使用两个 div 的微不足道的方式(请参阅使用背景过滤器和不使用背景过滤器过滤背景

例如:

.foreground {
 backdrop-filter: blur(0.8);
} 

注意:这没有完整的浏览器支持。

我想在这里分享一个技巧,既然你想要实现与 Apple 网站上相同的样式,只需使用 Developer Console。按 CTRL+SHIFT+I 并查看 Apple 如何为导航栏应用 CSS。通过这种方式,您可以学习新事物并实现您的目标:)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章