Размытый фон на движущейся навигационной панели

Question

Можно ли как-нибудь получить размытый фон на панели навигации boostrap 4?

Я пробовал CSS-фильтр размытия, но он также размывает весь мой div-контент.И я видел некоторых людей, использующих SVG, чтобы получить то, что находится за div, размыть это и затем показать, как маски для фотошопа, но это не сработало бы для меня, так как мне нужна навигационная панель fixed-top, чтобы она прокручиваласьс браузером по всей странице.

Итак, мне нужно применить некоторый css-эффект к этому «nav», чтобы он размывал то, что скрывается за ним, или, по крайней мере, выглядит так, как он.

{# 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 перекрывающихся "navbars"