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

下面的链接中有几个例子可以说明我所寻找的。但我正在尝试使用stock Bootstrap 3 nav类在背景色或图像上执行此效果。你认为这可能吗。每次我靠近时，整个导航都会模糊，而不仅仅是背景

我要找的是：

我将此设置用于引导：

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

谢谢。

这里是一个快速启动程序

添加你发布到导航栏的模糊代码将使导航栏中的所有内容模糊，因此你要做的是将导航的背景设置为半透明，并给它一个z索引以保持其顶部。然后在#navbar下面添加另一个条，并将其放置在与.navbar相同的位置，但使用z索引将其放置在其下方。下面是额外的模糊div的位置和模糊代码

<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);
}

... 
... 
.模糊{
位置：固定；
排名：0；
宽度：100%；
最小高度：50px；
边缘底部：20px；
背景：rgba（0,0,0,4）；
z指数：1010；
-webkit过滤器：模糊（20px）；
-moz滤波器：模糊（20px）；
-o-滤波器：模糊（20px）；
-ms过滤器：模糊（20px）；
过滤器：模糊（20px）；
}

这里是一个快速启动程序

添加你发布到导航栏的模糊代码将使导航栏中的所有内容模糊，因此你要做的是将导航的背景设置为半透明，并给它一个z索引以保持其顶部。然后在#navbar下面添加另一个条，并将其放置在与.navbar相同的位置，但使用z索引将其放置在其下方。下面是额外的模糊div的位置和模糊代码

<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);
}

... 
... 
.模糊{
位置：固定；
排名：0；
宽度：100%；
最小高度：50px；
边缘底部：20px；
背景：rgba（0,0,0,4）；
z指数：1010；
-webkit过滤器：模糊（20px）；
-moz滤波器：模糊（20px）；
-o-滤波器：模糊（20px）；
-ms过滤器：模糊（20px）；
过滤器：模糊（20px）；
}

您说过要在导航栏中显示效果（如示例所示）。您可以为导航栏提供透明的背景色。

CSS:

---

您说过希望在导航栏中显示效果（如示例所示）。您可以为导航栏提供透明的背景色。

CSS:

---

感谢用户3365721和arshad。我已经做了更多的研究，如果没有一些Javascript，我将无法完成我正在寻找的内容，如下例所示：

***在这里，您将看到菜单栏后面的文本和所有内容都是模糊的，而不是突出显示栏。这就是我遇到麻烦的地方

我现在只需要将其应用于引导框架和类

---

感谢您花了这么多时间，尽管您帮助我确认了我做得对，但需要

感谢用户3365721和arshad。我已经做了更多的研究，如果没有一些Javascript，我将无法完成我正在寻找的内容，如下例所示：

***在这里，您将看到菜单栏后面的文本和所有内容都是模糊的，而不是突出显示栏。这就是我遇到麻烦的地方

我现在只需要将其应用于引导框架和类

---

感谢您花了这么多时间帮助我确认我做得对，但需要使用背景滤镜：模糊（10px）

---

有关更多信息，请参见：

使用

背景滤镜：模糊（10px）

有关更多信息，请参见：
这里是另一个好链接/示例：这里是另一个。我只是不能让导航栏中的内容不模糊，它模糊了一切？您使用的代码在哪里？也许可以展示您尝试过的内容？这里是另一个很好的链接/示例：这里是另一个。我只是不能让导航栏中的内容不模糊，它模糊了一切？你使用的代码在哪里？可能会显示你尝试过的内容？这不会模糊导航栏，这是最初提出的问题。透明度不是这个问题的内容。这不会模糊导航栏，这是最初提出的问题。透明度不是问这个问题的内容。我仍然无法做到这一点。除了您给出的链接之外，您还有一个完美的工作示例吗？JavaScript的目的是操作DOM元素。CSS用于设置DOM元素的样式。你绝对不应该要求任何JavaScript来完成你所要求的，我还是做不到。除了您给出的链接之外，您还有一个完美的工作示例吗？JavaScript的目的是操作DOM元素。CSS用于设置DOM元素的样式。你绝对不应该要求任何JavaScript来完成你的要求。注意：这个属性在最初的评论发表3年后，对浏览器的支持非常糟糕。Safari需要webkit前缀，完全不支持IE 11。Firefox仅在手动启用时受支持：我知道。我正在寻找一种方法来使用其他方法添加此效果。注意：此属性的浏览器支持非常糟糕，在原始评论发表3年后。Safari需要webkit前缀，完全不支持IE 11。Firefox仅在手动启用时受支持：我知道。我正在寻找一种方法来增加这种效果使用其他一些方式。
.navbar{
 background:rgba(255,255,255,0.6);
}

            $(function () {
                html2canvas($("body"), {
                    onrendered: function (canvas) {
                        $(".blurheader").append(canvas);
                        $("canvas").attr("id", "canvas");
                        stackBlurCanvasRGB(
                            'canvas',
                        0,
                        0,
                        $("canvas").width(),
                        $("canvas").height(),
                        20);
                    }
                });
                vv = setTimeout(function () {
                    $("header").show();
                    clearTimeout(vv);
                }, 200);
            });

            $(window).scroll(function () {
                $("canvas").css(
                    "-webkit-transform",
                    "translatey(-" + $(window).scrollTop() + "px)");
            });

            window.onresize = function () {
                $("canvas").width($(window).width());
            };

            $(document).bind('touchmove', function () {
                $("canvas").css(
                    "-webkit-transform",
                    "translatey(-" + $(window).scrollTop() + "px)");
            });

            $(document).bind('touchend', function () {
                $("canvas").css(
                    "-webkit-transform",
                    "translatey(-" + $(window).scrollTop() + "px)");
            });