修复了添加滤镜模糊时导航栏消失的问题

Posted 2023-03-05

【中文标题】修复了添加滤镜模糊时导航栏消失的问题

【英文标题】：Fixed Navbar disappears when adding filter blur

【发布时间】：2019-12-07 15:39:06

【问题描述】：

我正在尝试为 Bootstrap 4 模态添加模糊背景。

我的想法是，将网站上的所有内容放在一个容器中（导航栏、内容和页脚），然后在设置 body.modal-open 时将 filter:blur(4px) 添加到该容器中。

不幸的是，这似乎不适用于固定导航栏 - 当您滚动到页面的一半并打开模式时，导航栏就会消失。

任何人都可以解释为什么/知道如何解决这个问题？

html：

<div id="content-container">
    <nav class="navbar fixed-top">
        <!--some nav elements -->
    </nav>
    <main>
        <!-- content goes here -->
    </main>
    <footer>
        <!-- some footer -->
    </footer>
<div>
<div id="modal-container">
    <!-- Modals go here -->
<div>

CSS：

body.modal-open #content-container
    filter: blur(4px);
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);

codepen 上的示例： https://codepen.io/danmoreng/pen/WVpzOm

【问题讨论】：

仅供参考 - 过滤器：模糊与边缘和 IE 的兼容性非常差，所以我们要小心。 caniuse.com/#search=filter%3Ablur

是的，也发现了。但似乎没那么重要，它根本就没有模糊——我仍然保留背景元素。

有趣的是，当您下载 Edge Insider Demo 时，我受到了模态框的启发——它们的模糊效果甚至可以在今天的 Edge 中使用：microsoftedgeinsider.com/en-us/download

@Danmoreng 请检查以下答案:)

【参考方案1】：

我根据要求做了一些更改，请检查。

Blur body on modal

【讨论】：

实际上导航栏只是被其他内容模糊了。它并没有消失，我只是为导航栏以外的所有内容添加了模糊。让我知道我是否可以通过其他方式提供帮助。谢谢