在网页开发中，给页面添加透明水印是很常见的需求，既能起到内容标识的作用，又不会过度干扰用户的正常操作。下面就来介绍两种最常用的HTML透明水印实现方法。
方法一：使用绝对定位叠加水印层
这种方式的思路是单独创建一个水印容器，通过CSS的position属性把它固定在页面上层，同时设置透明度和指针事件属性，让水印不会阻挡下方内容的点击操作。
首先写基础的HTML结构，页面正常内容和水印容器分开：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>透明水印示例</title>
<style>
/* 页面正常内容样式 */
.content {
padding: 20px;
line-height: 1.8;
}
/* 水印容器样式 */
.watermark {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* 让水印层不响应鼠标事件，不影响下方内容操作 */
z-index: 9999;
opacity: 0.2; /* 设置水印透明度，可根据需求调整 */
overflow: hidden;
}
/* 单个水印项样式 */
.watermark-item {
position: absolute;
font-size: 24px;
color: #999;
transform: rotate(-30deg); /* 让水印文字倾斜，更美观 */
white-space: nowrap;
}
</style>
</head>
<body>
<div class="content">
<h1>页面正常内容</h1>
<p>这里是页面的正文部分，用户可以正常点击、选中内容，水印不会造成干扰。</p>
<p>更多内容更多内容更多内容更多内容更多内容更多内容更多内容。</p>
</div>
<div class="watermark" id="watermark"></div>
<script>
// 生成水印的方法
function createWatermark(text) {
const watermarkBox = document.getElementById('watermark');
const boxWidth = window.innerWidth;
const boxHeight = window.innerHeight;
// 水印之间的间距
const xSpacing = 200;
const ySpacing = 150;
// 循环生成水印项
for (let y = -50; y < boxHeight + 50; y += ySpacing) {
for (let x = -50; x < boxWidth + 50; x += xSpacing) {
const item = document.createElement('div');
item.className = 'watermark-item';
item.innerText = text;
item.style.left = x + 'px';
item.style.top = y + 'px';
watermarkBox.appendChild(item);
}
}
}
// 调用方法生成水印，传入水印文字
createWatermark('内部资料');
</script>
</body>
</html>方法二：使用CSS伪元素生成水印
如果不想额外添加水印容器，也可以使用::before或者::after伪元素，给目标容器添加水印，这种方式更适合给局部区域添加水印。
下面是给整个页面添加伪元素水印的示例：
/* 给body添加伪元素水印 */
body::before {
content: '内部资料';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
color: #999;
opacity: 0.2;
transform: rotate(-30deg);
pointer-events: none;
z-index: 9999;
/* 让水印重复平铺 */
background-image: repeating-linear-gradient(
0deg,
transparent,
transparent 150px,
#999 150px,
#999 151px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 200px,
#999 200px,
#999 201px
);
background-blend-mode: multiply;
}不过这种伪元素的方式如果要生成多个重复的水印文字，需要调整背景图案或者结合JavaScript动态生成伪元素的内容，相对来说比第一种方法复杂一点。
两种方法的对比
| 对比项 | 绝对定位叠加水印层 | CSS伪元素生成 |
|---|---|---|
| 实现复杂度 | 较低，逻辑清晰 | 较高，复杂水印需要额外处理 |
| 灵活性 | 高，可以动态修改水印内容、数量 | 低，伪元素内容修改相对麻烦 |
| 适用场景 | 全页面水印、动态水印需求 | 固定内容、局部区域水印 |
实际开发中可以根据自己的需求选择合适的方法，两种方式的透明度都可以通过opacity属性调整，水印文字样式也可以根据页面风格自定义修改。
HTML透明水印CSSposition属性伪元素修改时间：2026-05-29 21:52:04