CSSを使用してメニューバーにぼかしを追加する方法

Question

メニューバーにぼかし効果を追加するにはどうすればよいですか？ CSSを使用しても可能ですか？ 今は透明ですが、ぼかしを追加したいと思います。あなたのメニューバーにぼかしを追加する

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

：

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; 
} 

Answer 1

私はあなたがCSSを使用することができると信じています。これは私の頭の上だけです

http://www.cssfilters.co/にはたくさんのクールなフィルター（ぼかしを含む）が使われていますので、これはメニューバーや画像の場合にはうまくいくと思います。

Answer 2

あなたはCSS3でtext-shadowを使用することによって、これを達成することができます

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

Answer 3

参照ペンHERE

あなたはblur(px)属性でfiler: CSSプロパティを使用します。詳細はHEREをご覧ください。

これはあなたのナビゲーション<div>に適用されます。

注：効果が働くには、opacityを0以上にする必要がありますが、望ましいぼかし色に設定するのは難しくありません。白、黒またはグレーです。あなたはまた、そのdivの外側にナビゲーションコンテンツを作成し、それをぼやけたdivの上にabsoluteの位置に配置します。そうでない場合は、コンテンツもぼかしフィルタを継承します。