jquery - Fancybox jQuery 中的 CSS 渐变？

Question

我正在调整我的 fancybox jQuery，以便在您打开灯箱后出现背景渐变。我不太擅长 jQuery，但这是 fancybox 为我提供的自定义背景颜色的功能:

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

所以我将 '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 设置一个新的 class，例如:

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

注意 我添加了 class myGradient 到容器中 class 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