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

这是我的解决方案：

271362/-

将图像和模糊效果置于-271362/-状态下，然后以常规方式进行导航栏样式的其余部分

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

替代解决方案（有效）：

如上所述，由于Bootstrap的性质，上述解决方案将无法使用，这是不使用JS的解决方案：

HTML：

:before

CSS：

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

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

Answer 2

这可以使用CSS backdrop-filter属性来完成。

HTML：

<nav class="nav-bar-blur">
  <content/>
</nav>

CSS：

.nav-bar-blur {
  backdrop-filter: blur(8px);
}

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

2 个答案: