使用css伪元素和绝对定位可实现网页水印。1. 通过::before伪元素添加“内部文档-禁止外传”内容，结合position:absolute覆盖页面；2. 设置background-size和background-position生成斜向重复纹理；3. 应用.watermark类到目标容器，利用z-index:-1和pointer-events:none确保水印不干扰交互。该方法无需javascript或额外html标签，仅靠css即可实现视觉水印效果。
实现网页水印效果，可以通过 CSS 伪元素配合绝对定位来完成，不需要 JavaScript 函数。虽然你说“html函数”，但实际是使用 HTML 结构和 CSS 样式协同实现的视觉效果。下面介绍如何用 ::before 或 ::after 伪元素结合绝对定位添加背景水印。
1. 使用伪元素创建水印文本
通过 CSS 的 ::before 伪元素，在页面或某个容器上插入水印内容。伪元素可以生成装饰性内容，不需额外 HTML 标签。
.watermark {
position: relative;
min-height: 100vh;
}
<p>.watermark::before {
content: "内部文档 - 禁止外传";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(200, 200, 200, 0.1) 25%, transparent 25%),
linear-gradient(-45deg, rgba(200, 200, 200, 0.1) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(200, 200, 200, 0.1) 75%),
linear-gradient(-45deg, transparent 75%, rgba(200, 200, 200, 0.1) 75%);
background-size: 100px 100px;
background-position: 0 0;
color: rgba(200, 200, 200, 0.8);
font-size: 16px;
font-weight: bold;
text-align: center;
line-height: 100vh;
pointer-events: none; /<em> 确保水印不阻挡鼠标事件 </em>/
z-index: -1;
}</p>2. 应用于页面或指定区域
将上述类应用到需要加水印的容器中，比如整个 body 或某个 div：
<div class="watermark"> <h1>机密内容</h1> <p>此处为受保护信息...</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div>
3. 关键点说明
- position: relative：确保伪元素能相对于该容器定位
- position: absolute：使伪元素脱离文档流，覆盖在内容背后
- content 属性：伪元素必须设置 content 才会显示
- z-index: -1：让水印位于内容下方，不影响交互
- pointer-events: none：允许用户点击或选择背后的文字
- 可使用背景图、旋转文字或重复图案增强水印效果
基本上就这些。利用伪元素 + 绝对定位，无需额外标签，就能干净地实现网页水印。
