html - 固定导航栏在添加滤镜模糊时消失

Question

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

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

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

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

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

Answer 1

我根据要求做了一些修改，请查收。

Blur body on modal