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

我试图找到一个JavaScript解决方案，它动态覆盖类似于David Walsh的dwImageProtector插件（http://davidwalsh.name/image-protector-plugin-for-jquery）的空白图像。我对该插件的问题是，首先，它将覆盖图添加到实际上未与目标图像对齐的“body”，其次，该插件不是为响应而构建的，这意味着如果我调整浏览器的宽度图像将保持与原始解析图像大小相同的方式。为图像响应的空白图像覆盖

我的代码看起来是这样的：

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


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

来源

2013-10-16 Pennf0lio

我讨厌这些“形象保护”技术，因为他们讨厌那些有正当理由来下载图像，并轻松CIR为那些没有的人而消失。这就像锁住你的房子的前门，同时让所有的窗户不安全;提供的“保护”不过是一种谎言。 – Blazemonger

@Blazemonger是的，我明白你的意思。如果他们真的想要，他们总是可以对图像进行截图。但我试图在未经许可的情况下减少下载/盗取图片的人数。如果你有更好的主意或技巧，我很乐意听到它:) – Pennf0lio

注：叠加把戏只能阻止充其量谁想要窃取你的图片外行的游客。有德特林盗窃没有可行的办法，因为：

游客可以从检查督察图像源，并直接下载它（但你可以规避，防止直接文件访问使用的.htaccess规则）
游客可以隐藏图像叠加
游客可以乘坐页面的截图
游客可以嗅出是从服务器提供给他们的浏览器文件

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

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

你的CSS：

.protect { 
    position: relative; 
} 
.protect:after { 
    background-image: url(/path/to/overlay); 
    background-size: cover; 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: 10; 
}

如果你不能改变的标记，不过，那么你应该依靠使用jQuery与包裹你的图像元素<div class="protect">元素，如上面提到的应用相同的样式，即

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

来源

2013-10-16 20:29:17 Terry

哦，这很酷。我没有想到这一点。是啊！ – Pennf0lio

是的，再次感谢。是的，我知道一个人可以通过各种方式提取图像。我只是尽量减少数量。再次感谢，特里。 – Pennf0lio

您还可以在''元素上添加'pointer-events：none'来防止从它触发的游标事件（例如，右键单击不起作用），尽管可以通过在Inspector中禁用属性或喜欢。 – Terry

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

回答

相关问题