模糊效果 CSS3 Firefox(linux)答案

【问题标题】：Blur effect CSS3 Firefox(linux)模糊效果 CSS3 Firefox(linux)
【发布时间】：2012-08-12 15:51:19
【问题描述】：

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

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

【问题讨论】：

标签： html firefox css filter effect

【解决方案1】：

这个解释更适合我。

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

【讨论】：

【解决方案2】：

Gecko 不支持 filter 属性。它仅适用于 IE (filter) 和 WebKit (-webkit-filter)。要在基于 Gecko 的浏览器（如 Firefox）中应用模糊效果，您可以使用 SVG 过滤器。 Here is a good explanation 如何使用 SVG 过滤器进行高斯模糊。这些 SVG 过滤器仅在 Gecko 中有效，因此您仍然需要用于 WebKit 和 IE 的旧代码。

【讨论】：

谢谢。我试图在没有 svg 的情况下做到这一点，但似乎不可能:)