1

如果用户未注册,我试图在我的相册上获得模糊效果。我明白了,但仅适用于 chrome。在我的 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>

我的网站.css

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

任何帮助,将不胜感激。谢谢 :)

4

2 回答 2

8

Gecko 不支持该filter属性。它仅适用于 IE ( filter) 和 WebKit ( -webkit-filter)。要在基于 Gecko 的浏览器(如 Firefox)中应用模糊效果,您可以使用 SVG 过滤器。这是一个很好的解释如何使用 SVG 过滤器进行高斯模糊。这些 SVG 过滤器仅适用于 Gecko,因此您仍然需要旧代码用于 WebKit 和 IE。

于 2012-08-16T10:02:22.287 回答
3

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

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

于 2013-01-06T21:29:56.253 回答