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

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

这是一个快速启动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 2

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

欲了解更多信息，请参阅：My Github Repo for adding frosty effect to Bootstrap navbar

Answer 3

感谢 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 框架和类。

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

Answer 4

只需使用 背景过滤器

.navibar {
  background-color: rgba(0, 0, 0, 0.815);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  padding: -100;
  backdrop-filter: blur(10px);
}

.navibar::after {
  content: "";
  display: table;
  clear: both;
}
.hope ul {
  margin-top: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.hope li {
  display: inline-block;
  margin-left: 35px;
  margin-right: 35px;
  padding-top: 10px;
}
.hope li img {
  margin-right: 3px;
  margin-left: 3px;
}
.hope li a {
  color: rgb(158, 158, 158);
  text-decoration: none;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  transition: 0.3s;
}
.hope li a:hover {
  color: white;
  text-decoration: none;
}
.hope li a img {
  margin-bottom: -8px;
}

.hope a .o {
  margin-bottom: -7px;
}
.hope ul .pls {
  padding-left: 300px;
}
.hope ul .plss {
  padding-right: 350px;
}

<header class="navibar">
      <div class="navi">
        <nav class="hope">
          <ul>
            <li><a href="https://www.youtube.com/channel/UCGWBCRLJph7pEByaL5Un9tQ"><img src="Images/Screenshot 2021-07-15 173623-modified.png" width="28" height="28">Subscribe!</a></li>
            <li><a href="https://discord.gg/9cCuPzHwN7">Discord Sever</a></li>
            <li><a href="mailto:mncfred1505@gmail.com">Email me</a></li>
            <li><a href="tel:+819091615828">Call me</a></li>
            <li><a href="#aboutme">About</a></li>
            <li><a href="#intro">Intro</a></li>
            <li><a href="#meme">Memes</a></li>
          </ul>
        </nav>
      </div>
    </header>

对我有用

Answer 5

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

Demo

CSS：

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