過濾器：Blur Firefox問題

我試圖在圖像+文本上添加模糊效果，對Java中的單擊效果產生影響。過濾器：Blur Firefox問題

它在鉻和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)'}); 
    });

希望有人能幫助我在這裏:)

來源

2015-07-19 Dennis

我最近沒有檢查過，但我不認爲FF本身就支持它。我認爲他們仍然需要URL版本或需要實驗標誌 - http://caniuse.com/#feat=css-filters –

我試過URL版本，但是其中一些對象會消失 – Dennis

然後或許一個簡短的演示可能是有用的，所以我們可以測試自己。 JSfiddle.net等待着你。 :) –

你應該設置最後前綴的規則。

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

來源

2015-07-19 12:17:11

好點但我們不能只是省略'-moz-filter'規則？ –

@ A.Wolff我自己，因爲它是無用的，我甚至會放棄webkit前綴。這取決於丹尼斯;）。關鍵是要調用前綴和簡單的規則;） –

我想要處理舊的Safari版本，你仍然需要webkit前綴一個 –

我想這

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來觸發此上的click事件的方法嗎？

來源

2015-07-19 12:28:03 Dennis

你可能會設置你的SVG進入html並且只應用filter：url（「＃blur」）;在jQuery中http://codepen.io/anon/pen/VLBVZb –

工作正常的模糊。但我怎麼說，使點擊圖像模糊，因爲值現在設置在HTML網址鏈接：「」 – Dennis

像這樣從jquery腳本：$（ ''）。click（function（）{$（'p'）.css（'filter'，'url（「＃blur」）'）}）; ？ –

過濾器：Blur Firefox問題

回答

相關問題