CSS를 사용하여 내 메뉴 막대에 흐림을 추가하는 방법

Question

내 메뉴 막대에 흐리게 효과를 추가하려면 어떻게해야합니까? 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; 
} 

Answer 1

나는 당신이 CSS를 사용할 수 있다고 생각 :

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

이 당신의 메뉴 표시 줄에 흐림을 추가 할 수 있습니다. 이건 내 머리 꼭대기에서 떨어져있어.

http://www.cssfilters.co/에 많은 멋진 필터 (흐림 포함)가 사용되었으므로 메뉴 막대뿐만 아니라 이미지에도 적용됩니다.

Answer 2

당신은

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

Answer 3

참조 펜 HERE

당신은 blur(px) 속성으로 filer: CSS 속성을 사용 CSS3에 text-shadow를 사용하여이 작업을 수행 할 수 있습니다. 더 많은 것을 찾아 HERE.

내비게이션 <div>에 적용 할 수있는 컨테이너입니다.

참고 : 효과가 작동하려면 opacity을 0 이상으로 설정해야하지만, 원하는 흐리게 표시된 색으로 설정하는 것은 어렵지 않습니다. 예 : 흰색, 검정 또는 회색. 해당 div의 바깥쪽에 내비게이션 컨텐츠를 만들고 흐린 div 위에 absolute 위치 시키십시오. 그렇지 않으면 콘텐츠가 흐림 필터를 상속받습니다.