Fancybox jQuery 中的 CSS 渐变？答案

【问题标题】：CSS gradients in Fancybox jQuery?Fancybox jQuery 中的 CSS 渐变？
【发布时间】：2014-09-27 06:13:10
【问题描述】：

我正在调整我的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'
        }

但它似乎只是输出最后一个声明并忽略之前的声明。

【问题讨论】：

您可以尝试使用渐变背景添加自定义类
只尝试一个带有逗号分隔符的background，否则我会按照 rajesh 所说的去做。

标签： jquery css webkit fancybox gradient

【解决方案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

注意我将 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

【讨论】：

感谢您的评论！我试过这样做，但没有用，可能是因为我的灯箱不是内联的，它们是 ajax。如果找不到其他解决方案，我会将它们更改为内联。