html - 折叠菜单背景模糊

Question

我试图在某个地方找到它，但找不到相关的。有人可以帮助我，让我知道这是否真的可行吗？

我有一个导航栏，它在折叠时具有透明背景。现在看起来很奇怪，因为我网站的背景(英雄形象)使菜单项不可读。你可以在这里看到它，在较小的屏幕上:在这里您可以找到 HTML:查看源代码:http://test.geradovana.lt/b2b/和 CSS:http://test.geradovana.lt/b2b/css/style.css

当菜单折叠时，我应该如何为较小的屏幕编辑背景以模糊或为该图像在背景中制作一些冰冻效果？我试图为菜单添加背景(一些 % 透明)，但没有产生效果。

非常感谢您的帮助!

Answer 1

嗯，这几乎是一个题外话的问题，因为有太多可能的答案。但我可以推荐的是在 container 类 div 中创建另一个 div。该 div 的直接子元素，具有如下 CSS 样式:

position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-filter: blur(30px);
filter: blur(30px);
background-color: #000000;
opacity: 0.2;

您可能还想设置以下 CSS 以删除下拉列表顶部的 1px 白线:

@media (max-width: 1200px)
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: none; /* This had value before and caused the white line */
  }
}

这也会影响更大屏幕上的页面，但我认为这不一定是坏事。这将使整个标题从背景中脱颖而出。它还将使导航链接在变成“移动”导航后在较小的屏幕上可读。

当然，不言而喻，请摆弄不透明度和模糊度，使其成为您自己的。