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过滤器。 Here is a good explanation如何将SVG滤镜用于高斯模糊。这些SVG过滤器仅适用于Gecko，因此您仍然需要WebKit＆amp; IE。

Answer 2

这种解释对我来说效果更好。

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

模糊效果CSS3 Firefox（linux）

2 个答案: