在网页开发中，给HTML页面添加文字水印是常见需求，可用于版权标识、页面状态提示等场景。下面先展示添加水印后的效果参考图：
实现思路梳理
文字水印的核心是通过Canvas生成水印图案，再将其作为背景图铺满整个页面，同时要保证水印不会被用户轻易删除，也不会影响页面原有内容的操作。
核心步骤
- 创建Canvas元素，绘制文字水印内容
- 将Canvas转换为base64格式的图片地址
- 通过CSS将图片地址设置为页面背景，实现平铺效果
- 监听DOM变化，防止水印被恶意删除
完整实现代码
以下是完整的HTML页面添加文字水印的实现代码，可直接复制到本地运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML页面文字水印示例</title>
<style>
/* 水印背景样式 */
.watermark-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* 允许点击穿透，不影响页面原有操作 */
z-index: 9999;
background-repeat: repeat;
}
/* 页面原有内容样式 */
.content {
padding: 20px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="content">
<h1>页面正文内容</h1>
<p>这是页面的原有内容，水印会覆盖在页面上方，不会影响这里的点击和交互操作。</p>
<p>你可以尝试右键检查元素，删除水印相关的DOM节点，会发现水印会自动重新生成。</p>
</div>
<script>
/**
* 添加文字水印的方法
* @param {string} text - 水印文字内容
* @param {object} options - 水印配置项
*/
function addWatermark(text, options = {}) {
const defaultOptions = {
fontSize: 16,
fontFamily: 'Microsoft YaHei',
color: 'rgba(0, 0, 0, 0.1)',
rotate: -20,
width: 200,
height: 150
};
const config = { ...defaultOptions, ...options };
// 创建Canvas元素
const canvas = document.createElement('canvas');
canvas.width = config.width;
canvas.height = config.height;
const ctx = canvas.getContext('2d');
// 设置文字样式
ctx.font = `${config.fontSize}px ${config.fontFamily}`;
ctx.fillStyle = config.color;
ctx.rotate(config.rotate * Math.PI / 180);
// 绘制水印文字
ctx.fillText(text, 20, config.height / 2);
// 转换为base64图片地址
const base64Url = canvas.toDataURL();
// 创建水印容器
let watermarkDiv = document.querySelector('.watermark-container');
if (!watermarkDiv) {
watermarkDiv = document.createElement('div');
watermarkDiv.className = 'watermark-container';
document.body.appendChild(watermarkDiv);
}
watermarkDiv.style.backgroundImage = `url(${base64Url})`;
// 监听DOM变化，防止水印被删除
const observer = new MutationObserver(() => {
if (!document.querySelector('.watermark-container')) {
addWatermark(text, config);
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
}
// 调用方法添加水印，可自定义文字和配置
addWatermark('测试水印文字', {
fontSize: 18,
color: 'rgba(100, 100, 100, 0.15)',
rotate: -25,
width: 220,
height: 180
});
</script>
</body>
</html>代码说明与注意事项
上述代码中，pointer-events: none是关键样式，它让水印层不会拦截鼠标事件，用户可以正常操作页面下方的按钮、输入框等元素。
如果不需要防止水印被删除，可以注释掉MutationObserver相关的监听代码，减少不必要的性能消耗。如果需要适配不同的页面场景，可以调整水印的旋转角度、颜色透明度、间距等配置项，让水印效果更符合页面整体风格。
常见问题解答
水印会不会影响页面性能？
水印生成后只是作为背景图存在，不会频繁重绘，正常情况下对页面性能的影响可以忽略不计。只有开启DOM监听时，会有微小的监听开销，对于普通页面来说完全可以接受。
如何让水印只在部分区域显示？
只需要修改水印容器的定位方式，比如将position: fixed改为position: absolute，然后给容器设置对应的父元素，就可以让水印只在指定区域显示。
HTMLJavaScriptCSS文字水印修改时间：2026-05-29 21:25:14