我正在尝试为 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
最佳答案
我根据要求做了一些修改,请查收。
关于html - 固定导航栏在添加滤镜模糊时消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57268380/