Fancybox jQuery中的CSS漸變？

Question

我正在調整我的fancybox jQuery，所以一旦打開燈箱就會出現背景漸變。我不是用jQuery太好，但是這是的fancybox爲我提供了以定製自己的背景色：

$(".fancybox-effects-c").fancybox({ 
wrapCSS : 'fancybox-custom', 
helpers : { 
    overlay : { 
     css : { 
      'background' : 'rgba(255,255,255,1)' 
      } 
     } 
    } 
}); 

所以我'-webkit-linear-gradient(top, #B7F9EE, #FAD19C) fixed;'取代'rgba(255,255,255,1)'和它的工作，但現在我不知道該怎麼去添加其他瀏覽器的聲明。我試過這樣做：

css : { 
    'background' : '-moz-linear-gradient(top, #B7F9EE, #FAD19C) fixed', 
    'background' : '-webkit-linear-gradient(top, #B7F9EE, #FAD19C) fixed', 
    'background' : '-ms-linear-gradient(top, #B7F9EE, #FAD19C) fixed' 
     } 

但它只是似乎輸出的最後一個聲明，並忽略之前的。

Answer 1

你也可以使用的fancybox tpl API選項新類設置爲的fancybox skin這樣的：

jQuery(document).ready(function ($) { 
    $(".fancybox").fancybox({ 
     tpl: { 
      wrap: '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin myGradient"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>' 
     } 
    }); 
}); // ready 

注意我加入了類myGradient到容器類fancybox-skin 。然後你可以像自己的CSS文件中添加的是一個CSS聲明：

.myGradient { 
    background :   linear-gradient(top, #B7F9EE, #FAD19C) fixed; 
    background : -moz-linear-gradient(top, #B7F9EE, #FAD19C) fixed; 
    background : -webkit-linear-gradient(top, #B7F9EE, #FAD19C) fixed; 
    background :  -ms-linear-gradient(top, #B7F9EE, #FAD19C) fixed; 
} 

見JSFIDDLE