移動導航欄上的模糊背景

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 個重疊的“導航欄”

Answer 2

這可以使用 CSS 背景過濾器屬性來完成。

HTML：

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

CSS：

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