图像的响应式空白图像叠加

Responsive blank image overlay for an image

本文关键字：图像 叠加 空白 响应      更新时间：2023-09-26

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

注意：覆盖技巧充其量只能阻止想要窃取您的图像的不熟悉的访问者。没有可行的方法来阻止盗窃，因为：

  1. 访问者可以从检查器检查图像源，并直接下载（但您可以使用阻止直接文件访问的.htaccess规则来规避它）
  2. 访问者可以隐藏图像叠加层
  3. 访问者可以截取页面的屏幕截图
  4. 访问者可以嗅探从服务器到浏览器
    5. 的文件

回到我的解决方案：你实际上不需要使用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" />');
});
相关文章：