Question

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

我的代码看起来像这样：

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


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

Answer 1

注意：叠加技巧最多只会阻止那些想要窃取您图片的未经授权的访问者。没有可行的方法来阻止盗窃，因为：

访问者可以从Inspector检查图像源，并直接下载（但您可以使用.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" />');
});

响应的空白图像覆盖图像

1 个答案: