브라우저에서 이미지를 흐리게 표시하는 방법은 무엇입니까?

Question

Chrome에서 아래 CSS는 이미지를 흐리게 만듭니다. 그러나 파이어 폭스에서 이미지를 볼 때 더 이상 이미지가 흐려지지 않습니다. 브라우저에서 작동하도록하는 방법에 대한 조언이 있으십니까?

div.wrapper{ 
    float:left; /* important */ 
    position:relative; /* important(so we can absolutely position the description div */ 
    padding: 5px; 
} 

div.imageblur{ 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 320px; 
    filter: blur(5px); 
     -webkit-filter: blur(5px); 
     -moz-filter: blur(5px); 
     -o-filter: blur(5px); 
     -ms-filter: blur(5px); 

    margin:-1px; 
    padding:1px; 
} 

div.image_container{ 
    width:318px; 
    overflow:hidden; 
} 

웹킷은 filter을 지원하는 유일한 하나이기 때문에의 HTML

<div class="wrapper"> 

      <!-- image --> 
      <div style="position: relative; left: 0; top: 0;"> 

       <div class="image_container"> 
        <div class="imageblur">  
         <a href="youtube/IiGW9JA_aPg"> <img src="http://i2.ytimg.com/vi/IiGW9JA_aPg/hqdefault.jpg"></a> 
        </div> 
       </div>     
      </div> 
      <!-- end image div --> 

</div> 

Answer 1

. http://caniuse.com/#feat=css-filters

은 참조 : 지원 http://www.html5rocks.com/en/tutorials/filters/understanding-css/

Answer 2

필터가 너무 파이어 폭스하지만 약간 복잡한 구문 :

img{ 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
    filter: grayscale(100%); 
} 

FILTER EXAMPLE

Answer 3

CSS 필터 : 여기에 바이올린에 샘플 예 I 밖으로 매우 새롭고 따라서 거의지지가되지 않습니다. Safari (야간)와 Chrome은 웹킷으로 인해 현재로서는 독점적으로 지원됩니다.