如何使用纯 CSS 和 HTML 覆盖图像/水印

Question

是否有一种简单的相对定位方法可以通过传递一个类来将透明的 PNG（或任何其他图像）覆盖在带有 CSS 的图像标签上？

 <img class="watermarked" src="http://placehold.it/500x325.jpg" alt="Photo">

那么 CSS 可能与此类似（不起作用）：

.watermarked{
  background-image: url("http://placehold.it/100x100/09f/fff.png");
  position: relative;
  left: 30px;
  opacity: 0.5;
}

理想情况下，我将能够在 CSS 中定义我的“水印”覆盖图像的路径，然后我添加“水印”类的任何图像都会使该图像覆盖在一些负相对定位的顶部。它应该能够应用于单个页面上的多个图像，因此单次使用 DIV 将不起作用。

显然，这对保护底层图像没有任何作用……所以称其为水印并不准确……更多的是临时覆盖。我很惊讶没有现成的答案，但我四处寻找并没有在这里或谷歌上找到答案。

 <img class="watermarked" src="http://placehold.it/500x325.jpg" alt="Photo">

.watermarked{
  background-image: url("http://placehold.it/100x100/09f/fff.png");
  position: relative;
  left: 30px;
  opacity: 0.5;
}

Answer 1

如果您要使用仅使用 CSS 的解决方案，我建议您将要添加水印的图像包装在容器中div，然后我们可以添加一个:after包含水印的伪元素。

理想的解决方案是将:after伪元素直接应用于img元素，但不幸的是，大多数浏览器不支持 using:before或:afteronimg元素。如果是这样，我们可以将.watermark直接应用于img标签。

在下面的解决方案中，我们将一个:after伪元素覆盖在整个图像上，然后将水印徽标放置在左上角。

该解决方案的一个优点是:after元素覆盖整个图像，这会阻止用户右键单击并保存图像（尽管这并不能阻止具有网络经验的任何人找到图像 URL 以下载它）。因为该:after元素覆盖了整个图像，我们还可以应用半透明背景来稍微模糊带水印的图像。

所以我们剩下这个解决方案：

.watermarked {
  position: relative;
}

.watermarked:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url("http://placehold.it/100x100/09f/fff.png");
  background-size: 100px 100px;
  background-position: 30px 30px;
  background-repeat: no-repeat;
  opacity: 0.7;
}

<div class="watermarked">
  <img src="http://placehold.it/500x325.jpg" alt="Photo">
</div>