固定引导导航栏下的模糊效果答案

【问题标题】：blurred effect under fixed bootstrap navbar固定引导导航栏下的模糊效果
【发布时间】：2014-10-21 09:59:06
【问题描述】：

我正在尝试在内容通过我的固定导航栏时对其进行模糊处理，但我无法模糊任何内容...这是我最近的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 我试图通过引导程序实现的预期效果

有什么想法吗？

【问题讨论】：

这里为您想要达到的效果类型提供了一个很好的解决方案：stackoverflow.com/a/19484879/2115001
@Fahad Hasan 您的链接也会模糊导航栏中的文本，这是我不想做的。请参阅我在第二小提琴中发布的所需效果。
请检查这个，jsfiddle.net/nallenscott/WtQjY/41。这反映了与您的第二小提琴相同的行为。
@Fahad Hasan 你的例子在我添加时模糊了标题上的文本。
模糊滤镜只模糊属于该元素的子元素的元素

标签： jquery css twitter-bootstrap

【解决方案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;
}

【讨论】：

本可以让它更漂亮，但我很兴奋：P
我认为 OP 正在使用 Twitter Bootstrap，所以这个解决方案可能不起作用。