使用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 伪元素结合绝对定位添加背景水印。
通过 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>将上述类应用到需要加水印的容器中，比如整个 body 或某个 div：
<div class="watermark"> <h1>机密内容</h1> <p>此处为受保护信息...</p> </div>
基本上就这些。利用伪元素 + 绝对定位，无需额外标签，就能干净地实现网页水印。
立即学习“前端免费学习笔记（深入）”；
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
943
收藏
