后台返回一张水印图片一张正常图片 前端怎么把水印图片覆盖在正常图片上 代码实现

可以使用CSS实现将水印图片覆盖在正常图片上，具体代码如下：

HTML代码：

<div class="image-container">
  <img src="path/to/normal-image.jpg" alt="Normal Image">
  <img src="path/to/watermark-image.png" alt="Watermark Image" class="watermark">
</div>

CSS代码：

.image-container {
  position: relative;
}

.watermark {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5; /* 设置透明度 */
  pointer-events: none; /* 防止水印遮挡正常图片 */
}

解释：

- 通过设置 `.image-container` 容器的 `position` 属性为 `relative`，将其变为相对定位的容器，使得内部的绝对定位元素 `.watermark` 以此为参照进行定位。
- 设置 `.watermark` 元素的 `position` 属性为 `absolute`，使其脱离文档流并相对于 `.image-container` 容器进行绝对定位。
- 通过设置 `.watermark` 元素的 `top` 和 `left` 属性为 `0`，将其定位在 `.image-container` 容器的左上角。
- 通过设置 `.watermark` 元素的 `opacity` 属性为 `0.5`，将其透明度设置为50%，使得正常图片可以透过水印图片显露出来。
- 通过设置 `.watermark` 元素的 `pointer-events` 属性为 `none`，禁止水印图片响应鼠标事件，防止其遮挡正常图片。