Question

有几个例子可供我查找，其中一个在下面的链接中。但我试图使用库存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;

我正在使用此设置进行引导：

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

如果您有任何疑问，请与我们联系。

谢谢。

Answer 1

使用backdrop-filter: blur(10px);

有关更多信息，请参见：My Github Repo for adding frosty effect to Bootstrap navbar

Answer 2

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

添加您发布到导航栏的模糊代码会模糊其中的所有内容，因此您要做的是将导航的背景设置为半透明并为其提供z-index以使其保持在最顶层。然后在#navbar下面添加另一个栏，并将其定位为与.navbar相同但位于其下方的z-index。下面是额外模糊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);
}

Answer 3

你说你想要导航栏中的效果（如例子中所示）。您只需为导航栏指定透明背景颜色即可。

Demo

CSS：

.navbar{
 background:rgba(255,255,255,0.6);
}

Answer 4

感谢user3365721和arshad。我做了更多的研究，如果没有一些Javascript就可以完成我想要的工作，如下例所示：

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

            $(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)");
            });

***你会在这里看到文本和菜单栏后面的所有内容都模糊不清楚吧。那是我遇到麻烦的地方。

我现在只需要将它应用于Bootstraps框架和类。

感谢你所有的时间，虽然你帮我确认我做得对，但需要

为Bootstrap 3固定导航栏添加结霜/模糊效果

4 个答案:

Demo