过滤器：模糊 Firefox 问题答案

【问题标题】：Filter:Blur Firefox Issue过滤器：模糊 Firefox 问题
【发布时间】：2015-10-08 15:53:45
【问题描述】：

我尝试在图像+文本上添加模糊效果，在 Java 中点击效果。

它在 chrome 和 safari 中运行良好。

但我没有机会在 Firefox 中获得这种效果。

代码：

$('.newsletter').click(function(){
    $(".overlay_newsletter").fadeIn();

    $(".name, li, .newsletter, svg, .header-links").css({
            '-webkit-filter': 'blur(3px)',
            'filter': 'blur(3px)',
            '-moz-filter': 'blur(3px)'});

    $(".menu-expand").css({
            '-webkit-filter': 'blur(8px)',
            'filter': 'blur(8px)',
            '-moz-filter': 'blur(8px)',
            'opacity':'0.5'});

    $(".logo").css({
            '-webkit-filter': 'blur(8px)',
            'filter': 'blur(8px)',
            '-moz-filter': 'blur(8px)'});
  });

希望有人可以在这里帮助我:)

【问题讨论】：

我最近没有检查，但我认为 FF 还没有像这样原生支持它。我认为他们仍然需要 URL 版本或需要启用实验标志 - caniuse.com/#feat=css-filters
我尝试了URL版本，但是有些对象会消失
那么也许一个简短的演示可能会很有用，这样我们就可以自己测试了。 JSfiddle.net 等着你。 :)

标签： jquery css blur effect

【解决方案1】：

我试过了

filter: url("data:image/svg+xml;utf9,<svg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><filter%20id='blur'><feGaussianBlur%20stdDeviation='2'%20/></filter></svg>#blur");

它在 FF 中运行良好，但是有没有办法在 jquery 中通过点击事件触发它？

【讨论】：

您可以将 SVG 设置为 html 并仅应用 filter:url("#blur");在 jquery codepen.io/anon/pen/VLBVZb
模糊效果很好。但我怎么说呢，让图像在点击时模糊，因为现在在 html url 链接中设置了该值：“”
像这样来自 jquery 脚本： $('p').click(function(){$('p').css('filter' , 'url("#blur")') }); ?

【解决方案2】：

你应该最后设置无前缀规则。

$('.newsletter').click(function(){
  $(".overlay_newsletter").fadeIn();

  $(".name, li, .newsletter, svg, .header-links").css({
        '-webkit-filter': 'blur(3px)',
        '-moz-filter': 'blur(3px)',
        'filter': 'blur(3px)'});

$(".menu-expand").css({
        '-webkit-filter': 'blur(8px)',
        '-moz-filter': 'blur(8px)',
        'filter': 'blur(8px)',
        'opacity':'0.5'});

$(".logo").css({
        '-webkit-filter': 'blur(8px)',
        '-moz-filter': 'blur(8px)',
        'filter': 'blur(8px)'});

});

除了旧版本的 FF 之外，还需要一个 svg 才能应用模糊效果。 https://developer.mozilla.org/en/docs/Web/CSS/filter

【讨论】：

@A.Wolff 我自己会，因为它没用，我什至会放弃 webkit 前缀。这取决于丹尼斯；）。关键是调用前缀和普通规则的顺序；）
我猜要处理旧的 Safari 版本，你仍然需要 webkit 前缀一个