jquery - 固定 Bootstrap 导航栏下的模糊效果

Question

我试图在内容通过固定导航栏时对其进行模糊处理，但我无法模糊任何内容...这是我最新的 jsfiddle尝试:

我假设我需要两层，一个用于文本的顶层，一个用于混合下面内容的较低透明层。这就是我的 css 的样子:

.navbar {
  z-index: 999;
  opacity: .94;
}

.navbar-fixed-top-glass-layer {
  top:0;
  position:fixed;
  z-index: 998;
  width:100%;
  height:50px;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}

我发布了jsfiddle我试图通过 bootstrap 达到的预期效果

有什么想法吗？

Answer 1

由于我的声誉，我无法对你们当前的讨论添加评论。 Fahad 的答案是正确的，只需在模糊标题上添加一个具有更高 z-index 的固定位置 div 来显示您想要的内容

jsFiddle http://jsfiddle.net/CSS_Apprentice/WtQjY/415/

HTML

<ul id="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>          
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

#navbar {
    width: 75%;
    text-align: justify;
    min-width: 500px;
    margin: 1% auto 0 auto;
    padding: 0;
    z-index: 10000000001;
    position: fixed;
    top: 0;
}

#navbar:after {
    content: '';
    display: inline-block;
    width: 100%;
}

#navbar li {
    display: inline-block;
}