彩色透明背景

时间:2012-10-24 06:14:13

标签: jquery colorbox

我想在colorbox模态之外有透明背景。目前使用此colorbox demo http://www.jacklmoore.com/colorbox/example4/中的css样式。基于这个答案https://stackoverflow.com/a/2760970/233933,我可以用透明的backgournd做:

$(".inline").colorbox({inline:true, width:"30%",
    onOpen: function() {
        // make the overlay visible and re-add all it's original properties!
        $('#cboxOverlay').css({
            'visibility': 'visible', 
            'opacity':0.5, 
            'cursor': 'pointer'
        });
        $('#colorbox').css({ 'visibility': 'visible' }).fadeIn(1000);
    }
});

但是我想为我的所有colorbox模式提供透明样式。我尝试编辑colorbox.css文件以包含:

#cboxOverlay{ visibility: visible; opacity: 0.5 }
#colorbox{ visibility: visible }

但这并没有改变任何事情。你的建议?

已更新

更新了措辞,因此很明显我希望模态之外是透明的。 谢谢!

2 个答案:

答案 0 :(得分:7)

尝试:

#cboxOverlay{ visibility: visible; opacity: 0.5 !important;}

内联样式应用于当前覆盖不透明度设置的叠加层。

更详细的说明:内联样式属性附加到#cboxOverlay元素,表示opacity:0.9。这会覆盖您的样式表。如果您将!important放在规则旁边,则不会将其推到一边以支持内联样式。

答案 1 :(得分:1)

对于透明背景(内部颜色框),您应该设置: #cboxContent { background: transparent; }