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