Question

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

我有一个导航栏，它在折叠时具有透明背景。它现在看起来很奇怪因为我的网站背景（英雄形象）使菜单项不可读。你可以在这里看到它，在较小的屏幕上：在这里你可以找到HTML：view-source：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 */
  }
}

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

当然，不言而喻，请用不透明和模糊来摆弄它，使它成为你自己的。

折叠的菜单背景模糊

1 个答案: