jquery - 图像中的 colorBox 水印

Question

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

Jack Moore

10/3/09

Ok, this should be easy to do. I appended a bit of HTML using the 'cbox_complete' event, but you could easily put that same code as colorbox's callback without using the event. Here's the JS:

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

and in my stylesheet I added the following style for '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

如果满足您的需求，我会在这里创建 fiddle 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:如果背景加载不出来，就换成其他图片，因为我只设置了网上找的图片。