html - 如何使用纯 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 将不起作用。

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

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

<div class="col-lg-3 col-md-6 mb-4">
  <div class="card">
    <img class="card-img-top watermarked" src="http://placehold.it/500x325" alt="">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
    </div>
  </div>
</div>

Answer 1

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

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

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

此解决方案的一个优势是 :after element 覆盖整个图像，这会阻止用户右键单击并保存图像(尽管这并不能阻止具有网络经验的任何人找到图像 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>