如何更改每个图像的叠加颜色？

Question

我正在使用FancyBox 2，我想自定义叠加颜色;我希望此颜色与单击的父div匹配。

例如：

<div style="background-color:#000"><a class="fancybox"...><img ...></div>
<div style="background-color:#111"><a class="fancybox"...><img ...></div>

Fancybox代码

$(".fancybox").fancybox( {
    padding:0,
    helpers : {
        overlay : { 
            css : { 'background-color' :  **PARENT'S COLOR** }
        }
    }
});

如何在上面的代码中自动设置正确的颜色？

Answer 1

最简单的方法是使用beforeShow回调动态获取父级的颜色，并将其直接应用于.fancybox-overlay选择器，如：

$(".fancybox").fancybox({
    beforeShow: function() {
        var parentColor = $(this.element).parent().css('backgroundColor');
        $(".fancybox-overlay").css({
            "backgroundColor": parentColor,
            "backgroundImage": 'none' // optional if you prefer a solid color
        });
    }
});​

参见 DEMO