如何用纯CSS和HTML实现图片水印？通过类实现相对定位叠加

阿华AIGC实验室

2026-5-15

解决方法：用容器+伪元素实现图片叠加水印

你的思路方向是对的，但直接给<img>标签加background-image是看不到效果的——因为<img>是替换元素，它通过src加载的图片会直接覆盖在background-image之上，所以背景图根本显示不出来。另外position: relative只是移动<img>本身，不会创建一个独立的叠加层。

下面给你两种可行的方案，都能实现“给指定类的图片批量加水印，支持单页多图”的需求：

方案一：手动添加容器（推荐，兼容性好）

我们给需要加水印的<img>套一个容器，然后利用容器的伪元素来生成水印层，这样每个图片的水印都是独立的。

修改后的HTML（基于你的Bootstrap结构）

<div class="col-lg-3 col-md-6 mb-4">
    <div class="card">
        <!-- 给img套一个带类的容器 -->
        <div class="watermarked-container">
            <img class="card-img-top" src="http://placehold.it/500x325" alt="">
        </div>
        <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>

对应的CSS

.watermarked-container {
  position: relative;
  display: block; /* 和card-img-top保持一致的块级显示 */
}

.watermarked-container::after {
  content: '';
  /* 绝对定位让水印层悬浮在图片上方 */
  position: absolute;
  top: 30px; /* 调整水印的垂直位置 */
  left: 30px; /* 调整水印的水平位置 */
  width: 100px;
  height: 100px;
  background-image: url("http://via.placeholder.com/100x100/09f/fff.png");
  background-repeat: no-repeat;
  background-size: cover; /* 让水印自适应容器大小 */
  opacity: 0.5; /* 调整水印透明度 */
  pointer-events: none; /* 让点击事件穿透水印，不影响图片交互 */
}

方案二：用JS自动给图片套容器（无需手动修改HTML）

如果你不想改动现有HTML结构，可以用JavaScript自动给所有带watermarked类的<img>添加父容器，这样就能复用上面的CSS：

JS代码

// 找到所有带watermarked类的图片
document.querySelectorAll('img.watermarked').forEach(img => {
  // 创建容器元素
  const container = document.createElement('div');
  container.className = 'watermarked-container';
  // 将容器插入到图片之前，再把图片移到容器里
  img.parentNode.insertBefore(container, img);
  container.appendChild(img);
  // 移除图片上的watermarked类，避免混淆
  img.classList.remove('watermarked');
});