Javascript 图像的响应空白图像覆盖

我试图找到一个javascript解决方案，它可以动态地覆盖一个空白图像，类似于David Walsh的dwImageProtector插件（）。我对该插件的问题是，首先，它将覆盖层附加到“主体”上，而“主体”实际上与目标图像不对齐；其次，该插件不是为响应而构建的，这意味着如果我调整浏览器的宽度，覆盖层图像将保持与原始解析图像大小相同的方式

我的代码如下所示：

//css
.column { position: relative }
.column img { width: 100%; }


// html
<div class='column'>
    <img class='protect' src='img/source.jpg' />
    <span>copyright 2013</span>
</div>

//css
.列{位置：相对}
.列img{宽度：100%；}
//html
版权所有2013

注意：覆盖技巧最多只能阻止那些想要窃取您图像的未经培训的访问者。没有可行的方法阻止盗窃，因为：

访问者可以从Inspector中检查图像源，并直接下载（但您可以使用阻止直接文件访问的.htaccess规则来避免这种情况）

访问者可以隐藏图像覆盖

访问者可以截取该页面的屏幕截图

访问者可以嗅探从服务器发送到浏览器的文件

---

回到我的解决方案：您实际上不需要为此使用JavaScript（或jQuery）。使用伪元素的简单CSS技巧将起作用。假设您有以下标记：

<div class='column'>
    <div class='protect'>
        <img src='img/source.jpg' />
    </div>
    <span>copyright 2013</span>
</div>

但是，如果您不能更改标记，那么应该使用jQuery将图像元素包装为

元素，并应用与上述相同的样式，即

$("img").each(function() {
    $(this).wrap('<div class="protect" />');
});

$（“img”）。每个（函数（）{
$（此）.wrap（“”）；
});

我讨厌这些“图像保护器”技术，因为它们让那些有正当理由下载图像的人感到恼火，而对那些没有合法理由下载图像的人来说，它们很容易被规避。这就像锁上了你家的前门，却没有锁上所有的窗户；提供的“保护”不过是个谎言。@Blazemonger是的，我明白你的意思。如果他们真的愿意，他们总是可以做一个屏幕截图。但我正在努力减少未经许可下载/窃取图像的人数。如果你有更好的想法或技巧，我很高兴听到：）是的，再次感谢。是的，我知道一个人可以通过多种方式提取图像。我只是想尽量减少这个数字。再次感谢您，Terry。您还可以将

指针事件：none

添加到

元素中，以防止光标事件从该元素触发（例如，右键单击不起作用），尽管可以通过禁用Inspector或类似工具中的属性来轻松规避。

$("img").each(function() {
    $(this).wrap('<div class="protect" />');
});