Question

所以我一直在寻找如何在图像中添加带有colorBox的水印，我在google的第一个结果中找到了一个旧的colorBox组，下一个答案是：

Jack Moore

09年10月3日

好的，这应该很容易做到。我使用了附加了一些HTML   'cbox_complete'事件，但您可以轻松地将相同的代码设置为   colorbox的回调而不使用该事件。这是JS：

$().bind('cbox_complete', function(){
     $('#cboxLoadedContent').append("<div id='protect' />");
});

在我的样式表中，我为'protected'添加了以下样式：

#protect{background:url(transparent.gif) 0 0 repeat; width:100%; height:100%; position:absolute; top:0; left:0;}

但是该解决方案会将水印加载到所有cbox，因为.bind（'cbox_complete'）它是一个全局变量，所以我做了一些修复工作，只使用我想要的特定窗口或链接：

$(document).ready(function(){
    $(".gallery").colorbox({
        width:"800",
        onComplete:function(){ $('#cboxLoadedContent').append("<div id='protect'></div>"); }
    });
});

现在它的工作，希望这对任何人都有帮助，因为我没有在其他网站上找到这个，但是其中一些例子中有一些...

现在我的问题是，在加载图片时，水印出现在左上角...我想要它在底层。

我已经尝试更改

了

brackground-position: right bottom;
bottom:0px;
right:0px;

有没有

postition: absolute;

我可以让它发挥作用，任何想法？

提前致谢。

Answer 1

如果符合你的需要，我会创造小提琴http://jsfiddle.net/aanred/DSXHt/。 #protect的CSS样式如下：

#protect {
    background:url(watermark.gif) bottom right no-repeat; 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:0;
    left:0;
}

ps：如果无法加载背景，只需将其更改为任何其他图像，因为我只将其设置为网上找到的图像。

colorBox水印图像

1 个答案: