我想创建一个类似于在苹果网站上找到的导航栏,
目前我能找到的是如何在图像上应用模糊,但我希望将模糊应用于导航栏后面的任何内容
我尝试使用 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] 删除。
我来说两句