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)' '-webkit-linear-gradient(top, #B7F9EE, #FAD19C) fixed;' 并且有效，但是现在我不知道如何为其他浏览器添加声明。 我尝试这样做：

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