如何使用 css 向我的菜单栏添加模糊答案

【问题标题】：How to add a blur to my menu bar using css如何使用 css 向我的菜单栏添加模糊
【发布时间】：2017-02-05 13:10:14
【问题描述】：

如何向我的菜单栏添加模糊效果？甚至可以使用css吗？它现在是透明的，但我想给它添加一个模糊。

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
opacity: 0.85;
position: fixed;
top: 0;
left: 0px;
width: 100%;
border-bottom: 100%px solid #737373;
box-shadow: 0 3px 5px rgba(0, 0, 0, 10);
}
li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

【问题讨论】：

标签： html css blur effect

【解决方案1】：

我相信你可以使用 CSS：

-webkit-filter: blur(5px);
filter: blur(5px);

为您的菜单栏添加模糊效果。不过，这只是我的想法

http://www.cssfilters.co/ 使用了很多很酷的滤镜（包括模糊），所以我认为这将适用于菜单栏以及演示的图像。

【讨论】：

【解决方案2】：

您可以通过在 CSS3 中使用 text-shadow 来实现此目的

li {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

【讨论】：

【解决方案3】：

见笔HERE

您可以将filer: CSS 属性与blur(px) 属性一起使用。查找更多HERE。

你可以将它应用到你的 Navigation <div>，不管是什么容器。

注意：您必须将opacity 设置为高于 0 才能使效果生效，但是将其设置为理想的模糊颜色并不难，即白色、黑色或灰色。您还将在该 div 之外创建导航内容并将其定位在 absolute 模糊的 div 上。如果不是，您的内容也将继承模糊过滤器。

【讨论】：