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

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( {
    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
        });
    }
});​

见演示