블러 효과 CSS3 Firefox (리눅스)

Question

사용자가 등록되지 않은 경우 내 사진 갤러리에 흐림 효과를 얻으려고합니다. 나는 그것을 얻었지만 크롬에 대해서만. 내 파이어 폭스 14.0.1 (리눅스)에서 나는

내 HTML 템플릿 (내가 장고에서 개발)

<h2> Gallerie</h2> 
<ul class="galeria" id="imagenes"> 
{% for image in gallery %} 
    {% if user.is_authenticated %} 
     <a rel="prettyPhoto[gallery]" href="{{image.url}}"> 
      <img width="120px" height="120px" alt="{{image.comment}}" src="{{image.url}}"/> 
     </a>   
    {% else %} 
     <img class="blur" alt="{{image.comment}}" src="{{image.url}}"/> 
    {% endif %} 
{% endfor %} 
</ul> 

내 site.css

img.blur{ 
    -webkit-filter: grayscale(0.5) blur(10px); 
    filter: grayscale(0.5) blur(10px); 
    width:120px; 
    height:120px; 
} 

모든 작업 얻을 수 아니에요 도움을 주시면 감사하겠습니다. 고마워요 :)

Answer 1

게코는 filter 속성을 지원하지 않습니다. IE (filter)와 WebKit (-webkit-filter)에서만 작동합니다. Gecko 기반 브라우저 (예 : Firefox)에 흐림 효과를 적용하려면 SVG 필터를 사용할 수 있습니다. Here is a good explanation 가우시안 블러에 SVG 필터를 사용하는 방법 이 SVG 필터는 Gecko에서만 작동하므로 WebKit & IE에 대한 이전 코드가 필요합니다.

Answer 2

이 설명은 나에게 잘 맞았습니다.

http://css-plus.com/2012/03/gaussian-blur/