filter:模糊的mozilla firefox 无效

我正在开发一个页面,它将动画图像,淡入模糊风格。 它适用于谷歌Chrome,但在Mozilla Firefox中没有。

我为mozilla firefox尝试这种方法。 http://css-plus.com/2010/05/how-to-add-a-gaussian-blur-effect-to-elements-within-firefox/但图像不可见。

这是我的代码:

JS:

 $(document).ready(function() { $("img").css({ "filter": "blur(4px)", "-webkit-filter": "blur(4px)", "-moz-filter": "blur(4px)", "-o-filter": "blur(4px)", "-ms-filter": "blur(4px)", "filter":"url('#blur1')" }); window.setTimeout(function() { $("img").css({ "filter": "blur(3px)", "-webkit-filter": "blur(3px)", "-moz-filter": "blur(3px)", "-o-filter": "blur(3px)", "-ms-filter": "blur(3px)", "filter":"url('#blur1')" }); }, 3000); window.setTimeout(function() { $("img").css({ "filter": "blur(2px)", "-webkit-filter": "blur(2px)", "-moz-filter": "blur(2px)", "-o-filter": "blur(2px)", "-ms-filter": "blur(2px)", "filter":"url('#blur1')" }); }, 3100); window.setTimeout(function() { $("img").css({ "filter": "blur(1.5px)", "-webkit-filter": "blur(1.5px)", "-moz-filter": "blur(1.5px)", "-o-filter": "blur(1.5px)", "-ms-filter": "blur(1.5px)", "filter":"url('#blur1')" }); }, 3200); window.setTimeout(function() { $("img").css({ "filter": "blur(1px)", "-webkit-filter": "blur(1px)", "-moz-filter": "blur(1px)", "-o-filter": "blur(1px)", "-ms-filter": "blur(1px)", "filter":"url('#blur1')" }); }, 3300); window.setTimeout(function() { $("img").css({ "filter": "", "-webkit-filter": "", "-moz-filter": "", "-o-filter": "", "-ms-filter": "", "filter":"url('#blur1')" }); }, 3400); $("#promoIMG").fadeIn(5000); });  

HTML:

 

AKB

我哪里做错了? 以及如何使其正确,以便mozilla firefox的页面动画在chrome中相同。

提前致谢

我明白了,我补充一下

      

有同样的问题; 图像没有显示(类似于@ kidwon的jsbin)。 通过将svg片段放在外部文件中并通过它加载来解决它

 filter: url("/blur.svg#blur"); 

在css。 引用 ,没有没用