2

有什么办法可以在 boostrap 4 导航栏上获得模糊的背景？

我试过 CSS 模糊过滤器，但它也模糊了我所有的 div 内容。而且我看到有些人使用 SVG 来获取 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>
4

2 回答 2

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 个重叠的“导航栏”

于 2018-09-25T13:23:29.527 回答
0

这可以使用 CSS 的背景过滤器属性来完成。

HTML：

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

CSS：

.nav-bar-blur {
  backdrop-filter: blur(8px);
}
于 2020-07-25T20:28:24.967 回答