0

我正在尝试找到一个 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>
4

1 回答 1

2

注意：叠加技巧最多只能阻止想要窃取您的图像的外行访问者。没有可行的方法来阻止盗窃，因为：

  1. 访问者可以从 Inspector 中检查图像源，然后直接下载（但您可以使用 .htaccess 规则来避免直接文件访问）
  2. 访问者可以隐藏图像叠加
  3. 访问者可以截取页面截图
  4. 访问者可以嗅探从服务器提供给浏览器的文件

回到我的解决方案：您实际上不需要为此目的使用 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-16T20:29:17.943 回答