jquery - 过滤器 :Blur Firefox Issue

Question

我尝试在图像 + 文本上添加模糊效果，在 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)'});
  });

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

Answer 1

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

$('.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