html - 移动导航栏上的模糊背景

Question

有什么方法可以使 boostrap 4 导航栏的背景模糊？

我试过 CSS 模糊过滤器，但它也模糊了我所有的 div 内容。我见过一些人使用 SVG 来获取 div 后面的任何内容，模糊它然后显示它，就像 photoshop 蒙版一样，但这对我不起作用，因为我需要一个 fixed-top 导航栏，因此它会随浏览器滚动浏览整个页面。

所以，我需要对这个“导航”应用一些 css 效果，所以它会模糊它后面的任何内容，或者至少看起来像那样。

{# Navbar #}
    <nav id="home-navbar" class="navbar fixed-top navbar-expand-lg navbar-light mx-0 mx-md-auto" style="background-color: #ffffffcc; z-index: 3; max-width: 1140px;">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand mx-auto" href="#"><img src="{{ asset('img/logo-menu.png', 'theme') }}" style="max-height: 66px;"></a>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav mx-auto my-4 my-lg-0" style="padding: 0;">
                <a class="nav-item nav-link" href="#">{{ l('hotel') }}</a>
                <a class="nav-item nav-link" href="#"</a>
                <a class="nav-item nav-link" href="#">{{ l('restaurantes') }}</a>
                <a class="nav-item nav-link" href="#">{{ l('galeria') }}</a>
                <a class="nav-item nav-link" href="#">{{ l('promocoes') }}</a>
                <a class="nav-item nav-link" href="#">{{ l('contato') }}</a>
            </div>
        </div>
    </nav>

Answer 1

这是我的解决方案:

.nav-bar-class-name:before {
   background-image: url('http://example.com');

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

将图像和模糊效果置于 :before 状态，然后以正常方式完成其余的导航栏样式

.nav-bar-class-name {
    example: example;
}

---

替代解决方案(有效):

如前所述，由于 Bootstrap 的性质，上述解决方案将行不通，这是一个不使用 JS 的解决方案:

HTML:

<nav class="nav-bar-blur">
</nav>
<nav class="navbar navbar-default">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>

CSS:

.nav-bar-blur {
    background-image: url('https://www.fillmurray.com/1500/1500');
    width: 100%;
    height: 70px;

    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
}

.navbar {
    height: 70px;
    width: 100%;
    position: absolute;
    top: 0;
    left:0;
}

这是我的 CodePen显示上述解决方案，有效地做到这一点的唯一方法是有 2 个重叠的“导航栏”