HTML如何给动态内容加水印

在前端开发中，给动态加载或者实时变更的内容添加水印是常见需求，比如后台管理系统的数据报表、用户上传的文档预览页面等场景都需要用到。下面先展示一张水印效果示例图：

Canvas绘制覆盖层水印

这种方式是最常用的动态内容水印实现方案，核心思路是先通过Canvas绘制水印图案，再将其转为背景图覆盖到动态内容容器上方，并且可以监听内容容器的变化动态调整水印位置。

实现步骤

• 创建Canvas元素，设置画布尺寸和文字样式，绘制水印文字
• 将Canvas转为base64格式的图片地址
• 把图片地址设为水印容器的背景，覆盖到动态内容上方
• 监听动态内容容器的DOM变化，避免水印被内容遮挡

代码示例

// 绘制水印的核心函数
function createWatermark(text, options = {}) {
  const {
    width = 200,
    height = 150,
    fontSize = 16,
    color = 'rgba(0,0,0,0.1)',
    rotate = -20
  } = options;
  // 创建canvas元素
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  // 设置文字样式
  ctx.font = `${fontSize}px Arial`;
  ctx.fillStyle = color;
  ctx.rotate((rotate * Math.PI) / 180);
  // 绘制水印文字
  ctx.fillText(text, 20, 100);
  // 返回base64图片地址
  return canvas.toDataURL('image/png');
}

// 给动态内容容器添加水印
function addWatermarkToContainer(containerId, watermarkText) {
  const container = document.getElementById(containerId);
  if (!container) return;
  // 创建水印覆盖层
  const watermarkDiv = document.createElement('div');
  watermarkDiv.style.position = 'absolute';
  watermarkDiv.style.top = '0';
  watermarkDiv.style.left = '0';
  watermarkDiv.style.width = '100%';
  watermarkDiv.style.height = '100%';
  watermarkDiv.style.pointerEvents = 'none'; // 避免遮挡内容交互
  watermarkDiv.style.backgroundImage = `url(${createWatermark(watermarkText)})`;
  watermarkDiv.style.backgroundRepeat = 'repeat';
  watermarkDiv.style.zIndex = '9999';
  // 设置容器为相对定位，方便水印定位
  container.style.position = 'relative';
  container.appendChild(watermarkDiv);

  // 监听容器内容变化，防止水印被移除
  const observer = new MutationObserver(() => {
    if (!container.contains(watermarkDiv)) {
      container.appendChild(watermarkDiv);
    }
  });
  observer.observe(container, { childList: true, subtree: true });
}

// 调用示例，给id为dynamicContent的容器添加水印
// addWatermarkToContainer('dynamicContent', '内部资料 禁止外传');

CSS伪元素水印

如果动态内容的布局比较固定，不需要频繁变更水印位置，也可以使用CSS伪元素生成水印，这种方式的性能比Canvas更好，但是适配动态内容的能力稍弱。

实现要点

通过::before或者::after伪元素在内容容器上方生成水印，利用CSS的transform属性旋转文字，设置较低的透明度避免影响内容阅读。

代码示例

/* 给动态内容容器添加水印的CSS样式 */
.dynamic-content-container {
  position: relative;
  width: 100%;
  min-height: 300px;
}

.dynamic-content-container::after {
  content: '内部资料';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.08);
  transform: rotate(-30deg);
  pointer-events: none;
  z-index: 999;
  /* 重复水印效果 */
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 100px,
    rgba(0,0,0,0.05) 100px,
    rgba(0,0,0,0.05) 101px
  );
}

两种方案对比

可以根据实际场景选择适合的实现方式，以下是两种方案的对比：

注意事项

• 水印的pointer-events属性要设置为none，避免遮挡下方内容的点击、滚动等交互操作
• 如果页面内容是通过异步加载动态插入的，需要在内容加载完成后再执行水印添加逻辑
• 为防止用户通过开发者工具删除水印，可以结合MutationObserver监听水印元素是否被移除，被移除后重新添加
• 水印文字的透明度建议设置在0.05到0.15之间，既不影响内容阅读，也能起到标识作用

HTMLCanvas动态内容水印watermark前端实现修改时间：2026-05-26 13:37:13