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

Add frosting/blur effect to Bootstrap 3 fixed navbar

提问by BHCOM

There are a couple examples out there for what I am looking for, one in the link below. But I am trying to perform this effect either on a background color or image using stock Bootstrap 3 nav classes. Is this possible do you think. Every time I get close the whole nav is blurred rather than just the background.

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

What I am looking for:

我在找什么：

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

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;

I am using this setup for bootstrap:

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

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

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

Please let me know if you have any questions.

请让我知道，如果你有任何问题。

Thank you.

谢谢你。

回答by Bosc

Here is a quick bootply http://www.bootply.com/BYInEV4LVu

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

Adding that blur code you posted to the navbar will blur everything in it, so what you want to do is to set the background of the nav to be semitransparent and give it a z-index to keep it on top. Then add another bar beneath the #navbar and position it the same as the .navbar but underneath it using z-index. Below is where the extra blur div should go and the blur code.

添加您发布到导航栏的模糊代码将模糊其中的所有内容，因此您要做的是将导航的背景设置为半透明并为其提供 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);
}

回答by BHCOM

Thanks user3365721 and arshad. I have done more research and what I am looking for can't be done without some Javascript as shown in the below example:

感谢 user3365721 和 Arshad。我做了更多的研究，如果没有一些 Javascript 就无法完成我正在寻找的东西，如下例所示：

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

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

*** You will see here that the text and everything behind the menubar is blurred not jus the bar. That is where I was having trouble.

*** 您将在此处看到菜单栏后面的文本和所有内容都变得模糊，而不仅仅是栏。那是我遇到麻烦的地方。

I just need to apply this now to Bootstraps framework and classes.

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

Thank you for all your time though you helped confirm to me that I was doing it right but need to

感谢您的所有时间，尽管您帮助向我确认我做得对，但需要

回答by thisisjaymehta

Use backdrop-filter: blur(10px);

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

For more info see: My Github Repo for adding frosty effect to Bootstrap navbar

有关更多信息，请参阅：我的 Github Repo，用于为 Bootstrap 导航栏添加冷淡效果

回答by arshad

You said you want the effect(as in the example) in the navbar. You can just give a transparent background color to your navbar.

你说你想要导航栏中的效果（如示例中所示）。你可以给你的导航栏一个透明的背景颜色。

Demo

演示

CSS:

CSS：

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