崩溃的菜单背景模糊

我试图在某处找到它，但无法找到相关的一个。有人可以帮助我，让我知道，如果它实际上是可能的？崩溃的菜单背景模糊

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

我应该如何编辑小屏幕模糊或使一些冷冻结冰影响的背景这个图像在菜单崩溃时的背景中？我试图为菜单添加背景（一些％透明），但它没有给出效果。

非常感谢您的帮助！

来源

2016-08-30 MajaLena

嗯，这几乎是一个离题问题，因为有这么多可能的答案。但我可以推荐的是在container class div内制作另一个div。

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 */ 
    } 
}

该专区，其中有CSS样式像这样的直接子这也会在更大的屏幕上影响页面，但我不认为这是一件坏事。这将使整个标题从背景中脱颖而出。此外，它将使导航链接在变成“移动”导航后在较小的屏幕上可读。

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

来源

2016-08-30 07:11:40 thepio

崩溃的菜单背景模糊

回答

相关问题