模糊效果CSS3 Firefox(linux)

Question

如果用户没有注册,我试图在我的照片库上获得模糊效果.我明白了,但仅限于镀铬.在我的Firefox 14.0.1(linux)中,我无法让它运行起来

我的html模板(我在django下开发)

<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

Gecko不支持该filter物业.它只适用于IE(filter)和WebKit(-webkit-filter).要在基于Gecko的浏览器(如Firefox)中应用模糊效果,您可以使用SVG过滤器.以下是如何将SVG滤镜用于高斯模糊的很好的解释.这些SVG过滤器仅适用于Gecko,因此您仍需要WebKit和IE的旧代码.