模糊效果CSS3 Firefox（linux） [英] Blur effect CSS3 Firefox(linux)

问题描述

如果用户未注册，我想在我的照片库中获得模糊效果。
我得到它，但只为chrome。在我的Firefox 14.0.1（linux）中我无法使它工作

I'm trying to get a blur effect on my photogallery if the user is not registered. I got it, but only for chrome. In my Firefox 14.0.1 (linux) I'm not able to get it working

我的html模板（我在django下开发）

My html template (I develop under 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

My site.css

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

任何帮助将不胜感激。感谢：）

Any help would be appreciated. Thanks :)

推荐答案

Gecko不支持过滤器属性。它只能在IE（ filter ）和WebKit（ -webkit-filter ）中工作。要在基于Gecko的浏览器（如Firefox）中应用模糊效果，您可以使用SVG过滤器。 这是一个很好的解释如何使用SVG滤镜进行高斯模糊。这些SVG过滤器只能在Gecko工作，所以你仍然需要你的旧代码WebKit& IE。

Gecko does not support the filter property. It only works in IE (filter) and WebKit (-webkit-filter). To apply blur effects in Gecko-based browsers (like Firefox) you could make use of SVG Filters. Here is a good explanation how to use SVG Filters for a gaussian blur. These SVG Filters only work in Gecko so you still need your old code for WebKit & IE.

这篇关于模糊效果CSS3 Firefox（linux）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！