javascript - 为 Bootstrap 3 固定导航栏添加磨砂/模糊效果

Question

有几个例子可以满足我的需求，下面的链接中有一个。但我正在尝试使用 Stock Bootstrap 3 导航类在背景颜色或图像上执行此效果。你觉得这可能吗。每次我靠近时，整个导航都会变得模糊，而不仅仅是背景。

我在找什么:

http://codepen.io/adobe/pen/d056d1b26b9683c018f9bb9e0f1b0e1c

-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
opacity: 0.4;

我正在使用此设置进行 Bootstrap :

http://getbootstrap.com/examples/jumbotron/

如果您有任何问题，请告诉我。

谢谢。

Answer 1

这是一个快速 Bootstrap http://www.bootply.com/BYInEV4LVu

添加您发布到导航栏的模糊代码会模糊其中的所有内容，因此您要做的是将导航栏的背景设置为半透明并为其提供一个 z-index 以使其保持在顶部。然后在#navbar 下方添加另一个栏，并将其定位在与 .navbar 相同的位置，但使用 z-index 在其下方。下面是额外的模糊 div 应该去的地方和模糊代码。 html

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid the-navbar">
        <div class="navbar-header"> ... </div>
        <div id="navbar" class="navbar-collapse collapse"> ... </div><!--/.nav-collapse -->
        <div class="the-blur"></div>
    </div>
</nav>

.the-blur {
    position: fixed;
    top:0;
    width: 100%;
    min-height: 50px;
    margin-bottom: 20px;
    background: rgba(0,0,0,.4);
    z-index:1010;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
}