CSS3 필터를 마스크로 사용

Question

css3 필터를 마스크로 사용할 수 있습니까? 예를 들어 위로부터 div 중 30 % 만 흐리게 처리하고 싶습니다. 내가 어떻게 해?

나는 내가 실현하려 노력하고있어 설명하기 위해 약간의 jsfiddle을 만듭니다 http://jsfiddle.net/uxCXa/2/

Answer 1

나는 그것을 달성하기 위해 의사 요소를 사용하고 가짜 웹킷의 흐림 필터에 box-shadow를 추가하는 것입니다.

.container { 
    position: relative; 
    width: 200px; 
} 

.container:after { 
    position: absolute; 
    top: 15%; 
    bottom: 15%; 
    left: 0; 
    right: 0; 
    background: rgba(100,100,100,0.3); 
    box-shadow: 0 0 3px 0 rgba(100,100,100,0.3); 
    z-index: 2; 
    content: ""; 
} 

top 및 bottom 당신이 원하는 그 30 %의 절반해야합니다.