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

【问题标题】：How to overlay an image/watermark with pure CSS and HTML如何用纯 CSS 和 HTML 覆盖图像/水印
【发布时间】：2021-07-23 13:46:35
【问题描述】：

有没有一种简单的相对定位方法，只需传递一个类，就可以将透明 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>

【问题讨论】：

标签： html css image overlay watermark

【解决方案1】：

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

理想的解决方案是将:after 伪元素直接应用于img 元素，但不幸的是大多数浏览器不支持在img 元素上使用:before 或:after。如果是这样，我们可以将.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>

【讨论】：

【解决方案2】：

另一种方法是创建一个相对的div，放在页面的流中，先放主图，再放水印。

<!Doctype>
<html>
<head>
    <style>
    .card
    {
        position: relative;
        top: 0;
        left: 0;
    }
    .watermark
    {
        position: absolute;
        top: 60px;
        left: 80px;
    }
    </style>
</head>
<body>
    <div style="position: relative; left: 0; top: 0;">
        <img src="img/cardX.png" class="card"/>
        <img src="img/watermark2.png" class="watermark"/>
    </div>
</body>
</html>

或者你可以overlay你的图片加水印文字。这可以通过 HTML 或 CSS 轻松完成。

HTML：

<figure class="watermark">
<img class="demo" src="image.jpg" alt="Image" />
<figcaption class="watermark-text">Watermark XYZ</figcaption>
</figure>

CSS 代码较长，因为您需要定义类等并使用 :after 元素，如上所述 Brett。

.watermark {
position: relative;
padding: 0;
margin: 0;
}
.watermark img {
display: block;
max-width: 100%;
height: auto;
}
.watermark:after {
content: "";
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.6) 70%) repeat 0 0;
z-index: 1;
}
.watermark-text {
display: block;
position: absolute;
width: 100%;
color: #fff;
left: 0;
bottom: 0;
padding: 1em;
font-weight: 700;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

【讨论】：

谢谢。这里的问题是，我必须为每个图像包含水印图像标记......这样最终会在 HTML 中产生很多额外的混乱。真的希望 CSS 可以使用一个“水印”图像引用来完成它，该引用只是被多次重复使用。

【解决方案3】：

使用实际图像作为背景图像，然后在标签中无限重复使用水印。这使得另存为水印后面的背景图像变得更加困难，但也阻止了爬虫索引图像。如果您仍希望抓取带水印的照片，您只需在 .txt 文件中列出其网址并将其作为站点地图提交即可。

【讨论】：