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我试图通过引导程序实现的预期效果

有什么想法吗？

Answer 1

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

<强>的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;
}

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

1 个答案: