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

使用纯CSS和HTML覆盖图像/水印可以通过以下步骤实现：

创建一个包含图像的HTML元素，可以使用<img>标签或者CSS的background-image属性来插入图像。例如：

<div class="image-container">
  <img src="image.jpg" alt="Image">
</div>

使用CSS来覆盖图像。可以使用绝对定位和层叠顺序（z-index）来将覆盖元素放在图像上方。例如：

.image-container {
  position: relative;
}

.image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 设置覆盖元素的背景颜色和透明度 */
  z-index: 1; /* 设置层叠顺序，使覆盖元素在图像上方 */
}

如果要添加水印，可以在覆盖元素中插入文本或图标。可以使用绝对定位和层叠顺序来控制水印的位置和显示顺序。例如：

.image-container::after {
  /* ... */
  z-index: 1;
}

.image-container::before {
  content: "Watermark";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: white;
  z-index: 2; /* 设置层叠顺序，使水印在覆盖元素上方 */
}

这样，通过CSS和HTML的组合，你可以实现覆盖图像或添加水印的效果。

推荐的腾讯云相关产品：无

注意：本回答仅提供了一种实现方式，实际应用中可能需要根据具体需求进行调整和优化。