如何使用css将模糊添加到我的菜单栏

问题描述：

如何将模糊效果添加到我的菜单栏？它甚至可以使用CSS？它现在透明，但我想添加一个模糊。如何使用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; 
}

答

我相信你可以使用CSS：

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

的模糊添加到您的菜单栏。这只是我的头顶虽然

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

答

您可以通过使用CSS3 text-shadow

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

答

见笔HERE

你会使用与blur(px)属性filer: CSS属性实现这一目标。查找更多HERE。

无论使用什么容器，您都可以将其应用于导航<div>。

注意：您必须有一个opacity以上的效果才能工作，但将其设置为理想的模糊颜色并不难，即白色，黑色或灰色。您还将在该div的外部创建导航内容，并将其定位在absolute上方。如果不是，你的内容也将继承模糊过滤器。

如何使用css将模糊添加到我的菜单栏

相关推荐