如何在导航栏上实现模糊效果？

【问题标题】：How to achieve a blur effect on navbar?如何在导航栏上实现模糊效果？
【发布时间】：2020-08-17 11:32:37
【问题描述】：

我想在导航栏组件的背景中制作模糊效果。如果我使用 CSS 核心中存在的普通模糊效果，它不会像我想要的那样工作，所以我需要一些帮助。

示例：

在第一张图片上，底部的面板部分有一些“透明背景”，但它不是不透明的。在右侧有一个具有模糊效果的导航栏。我尝试使用 CSS 模糊效果，但它使菜单项不可读。

【问题讨论】：

您能否附上您所做的示例代码或 codepen
Blur 表示不聚焦，你是什么意思模糊导航栏，所以你的意思是取消聚焦导航栏中的选定项目还是什么？
您应该发布到目前为止您尝试过的内容。请参阅how to create a better example
我不想让导航栏“失焦”，我想让导航栏背景透明，以便我们可以看到它下面的内容。但是这个视图必须做出那种凌乱的效果，就像我们使用模糊效果时一样

标签： html css

【解决方案1】：

这是通过将不透明度设置为背景颜色并添加模糊滤镜来完成的。

对于下面的示例，请查看background:rgba(0,0,0,.7) 和backdrop-filter: blur(5px)。

对于背景颜色，您必须使用RBGA 而不是hex。调整末尾的.7 以自定义不透明度。与模糊滤镜类似，调整(5px) 的模糊强度。

.navbar {
background:rgba(0,0,0,.7);
backdrop-filter: blur(5px);

color:#fff;position:fixed;height:300px;width:500px}
img {position:fixed}

<img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">

<div class="navbar">
transparent black background
</div>

【讨论】：

对不起，我想要的不是这个效果。文本必须在一个框内，并且该框必须在其区域的背景中具有“模糊”效果