html 全屏添加水印

实现方式有很多种，以下是其中一种：

1. 在 HTML 中添加一个全屏的 div 元素，设置其 z-index 属性为最大值，使其覆盖在页面所有元素上。

2. 在这个 div 元素中添加一个 canvas 元素，设置其宽高为全屏，用于绘制水印。

3. 在 JavaScript 中编写绘制水印的代码，将水印绘制在 canvas 上。

4. 将 canvas 转化为 base64 编码的图片，并将其设置为 div 元素的背景图，从而实现全屏添加水印的效果。

以下是代码示例：

HTML 代码：

<div id="watermark">
  <canvas id="watermark-canvas"></canvas>
</div>

CSS 代码：

#watermark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none; /* 防止水印影响用户操作 */
}

#watermark-canvas {
  width: 100%;
  height: 100%;
}

JavaScript 代码：

const canvas = document.getElementById('watermark-canvas');
const ctx = canvas.getContext('2d');

// 绘制水印文本
ctx.font = '20px sans-serif';
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('Watermark', canvas.width / 2, canvas.height / 2);

// 将 canvas 转化为 base64 编码的图片
const dataURL = canvas.toDataURL();

// 将 base64 编码的图片设置为 div 元素的背景图
const watermark = document.getElementById('watermark');
watermark.style.backgroundImage = `url(${dataURL})`;

这样就可以在页面中添加一个全屏的水印了。