0

所以我一直在寻找如何在图像中添加带有颜色框的水印，我在谷歌的第一个结果中发现了一个较旧的颜色框组和下一个答案：

杰克摩尔

2009 年 10 月 3 日

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

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

在我的样式表中，我为“受保护”添加了以下样式：

#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;

我可以让它工作，知道吗？

提前致谢。

4

1 回答 1

0

如果它在这里满足您的需要，我会创建小提琴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：如果背景无法加载，只需将其更改为任何其他图像，因为我只将其设置为我在网上找到的图像。

于 2012-11-28T14:00:37.713 回答