使用CSS的pointer-events: none和绝对定位，可创建不干扰用户操作的视觉水印。
想在HTML页面上加个水印，又不想它碍事儿、影响用户点击或者复制文字？这事儿其实不难，核心思路就是让水印“看起来在”，但“摸不着”，像个幽灵一样，只负责视觉上的存在感，不干涉实际内容操作。这通常通过CSS的pointer-events: none;属性配合合适的定位和层级（z-index）来实现。
解决方案
通常我处理这种需求，会倾向于用一个独立的HTML元素（比如一个div）来承载水印，或者更优雅一点，利用CSS的伪元素::before或::after。关键点有几个，听我慢慢道来。
首先，我们需要一个容器来放置水印。这个容器可以是body，也可以是页面中某个特定的区块。然后，我们在这个容器内部创建一个或多个水印元素。
<div class="page-content-wrapper">
<!-- 你的页面主要内容都在这里 -->
<h1>重要文档标题</h1>
<p>这是一段非常重要的内容，用户可以正常地进行选择、复制和交互。</p>
<button onclick="alert('你点击了按钮！')">点击我</button>
<a href="#">这是一个链接</a>
<!-- 水印叠加层，它会浮在内容之上 -->
<div class="watermark-overlay">
机密文件 禁止外传
</div>
<!-- 如果需要多个平铺水印，可以创建多个div或通过JS动态生成 -->
<!-- <div class="watermark-overlay-tiled">保密</div> -->
</div>接着是CSS部分，这是实现“不影响内容”的关键：
立即学习“前端免费学习笔记（深入）”；
.page-content-wrapper {
position: relative; /* 确保水印相对于此容器定位 */
min-height: 100vh; /* 示例：让容器至少占满视口高度 */
overflow: hidden; /* 防止水印旋转后溢出容器 */
padding: 20px; /* 给内容留出一些空间 */
}
.watermark-overlay {
position: absolute; /* 让水印脱离文档流，自由定位 */
top: 50%; /* 垂直居中 */
left: 50%; /* 水平居中 */
transform: translate(-50%, -50%) rotate(-30deg); /* 居中后旋转，增加视觉效果 */
color: rgba(0, 0, 0, 0.1); /* 半透明的文字颜色 */
font-size: 4em; /* 大字体 */
font-weight: bold;
white-space: nowrap; /* 防止文字换行 */
z-index: 9999; /* 确保水印在大部分内容之上 */
pointer-events: none; /* 核心！让鼠标事件（点击、选择等）穿透水印层，直接作用于其下方的元素 */
user-select: none; /* 禁用水印文字的选择 */
-webkit-user-select: none; /* 兼容Safari */
-moz-user-select: none; /* 兼容Firefox */
-ms-user-select: none; /* 兼容IE/Edge */
}
/* 如果是平铺水印，可以这样设置，但通常会结合JS动态生成 */
/* .watermark-overlay-tiled {
position: fixed; // 或 absolute, 取决于水印是否随滚动
width: 100%;
height: 100%;
background-image: repeating-linear-gradient(
-45deg,
rgba(0, 0, 0, 0.05) 0px,
rgba(0, 0, 0, 0.05) 100px,
transparent 100px,
transparent 200px
);
background-size: 200px 200px;
pointer-events: none;
z-index: 9999;
top: 0;
left: 0;
} */通过position: absolute;或fixed;将水印元素脱离文档流，然后用z-index确保它在内容之上。最关键的是pointer-events: none;，它让鼠标事件直接“穿透”水印层，就好像水印不存在一样，用户依然可以正常点击按钮、选择文本。此外，user-select: none;也能防止用户意外选中水印文字。
为什么传统的背景图片水印不够灵活？
说到水印，很多人可能第一反应就是给某个元素的背景加张图。这当然是一种方法，但要做到“不影响内容”且功能多样，它就显得有点力不从心了。
背景图片，顾名思义，它就是元素的背景。它确实不会阻碍鼠标点击，因为点击事件是作用在元素本身上的。然而，它的局限性在于：
-
层级控制不足：背景图片始终是背景，它无法像一个独立的DOM元素那样，通过
z-index精确地控制它在页面中的层级。你很难让它浮在某个特定元素之上，又在另一个元素之下。它就是“背景”，固定在那里。 - 动态性差：如果你的水印需要动态显示内容，比如当前用户的ID、访问时间，背景图片就无能为力了。你得先生成一张图片，再作为背景图加载，这流程太重了。
- 定位与布局：背景图片通常是平铺或固定在某个位置。如果你想让水印以一个特定的角度旋转，或者只出现在页面的某个非矩形区域，用背景图片实现起来会非常复杂，甚至不可能。
- 交互性缺失：虽然背景图片不阻碍点击，但它也无法承载任何交互逻辑。你不能让背景水印上的文字在鼠标悬停时变色，也不能点击它触发什么事件（虽然我们一般不希望水印有交互）。
- 内容遮盖风险：虽然背景图在视觉上是背景，但如果内容本身是透明的，或者背景图颜色过深，可能会影响内容的阅读性。而通过独立元素作为水印，我们可以更精细地控制其透明度、颜色和位置，确保内容的可读性。
所以，虽然背景图片水印简单直接，但在追求“不影响内容”的同时，还需要更多灵活性和控制力时，独立元素配合CSS属性的方案无疑更胜一筹。
如何实现可定制的动态文本水印？
很多时候，我们需要的不是一个固定的Logo，而是能显示用户ID、时间戳这类动态信息的“活”水印。这就要请出JavaScript了。结合前面提到的CSS技巧，实现动态文本水印其实非常直接。
基本思路是：利用JavaScript动态地创建水印元素，并为其设置内容和样式。
-
创建水印元素：通过
document.createElement('div')创建一个新的div元素。 -
设置动态内容：将需要显示的用户ID、时间戳等信息赋值给水印元素的
textContent或innerText。 -
应用CSS样式：给这个新创建的
div添加一个预定义好的CSS类（比如前面提到的.watermark-overlay），或者直接通过element.style设置内联样式。核心仍然是position: absolute/fixed;、z-index;、opacity;和pointer-events: none;。 -
添加到页面：将这个水印元素追加到页面的
body或某个特定的容器元素中。
function addDynamicWatermark(text, containerId = 'body') {
const container = containerId === 'body' ? document.body : document.getElementById(containerId);
if (!container) {
console.error('Watermark container not found:', containerId);
return;
}
// 创建水印元素
const watermarkDiv = document.createElement('div');
watermarkDiv.className = 'dynamic-watermark-item'; // 使用一个新类名，方便管理
watermarkDiv.textContent = text;
// 应用样式
// 这里的样式与之前.watermark-overlay类似，但可能需要调整以适应动态生成
watermarkDiv.style.cssText = `
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
color: rgba(0, 0, 0, 0.15); /* 稍微深一点，或者保持一致 */
font-size: 2.5em;
font-weight: bold;
white-space: nowrap;
z-index: 9999;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
/* 确保水印始终在容器内，且不影响容器滚动 */
width: max-content; /* 让宽度自适应内容 */
height: max-content; /* 让高度自适应内容 */
`;
container.appendChild(watermarkDiv);
}
// 示例用法：
// 获取当前用户信息和时间
const userName = '用户A123';
const currentTime = new Date().toLocaleString();
addDynamicWatermark(`${userName} - ${currentTime}`);
// 如果需要满屏平铺的动态水印，逻辑会稍微复杂一些：
function addTiledDynamicWatermarks(text, containerId = 'body') {
const container = containerId === 'body' ? document.body : document.getElementById(containerId);
if (!container) {
console.error('Watermark container not found:', containerId);
return;
}
// 清除旧的水印，避免重复添加
container.querySelectorAll('.dynamic-watermark-item-tiled').forEach(el => el.remove());
const containerWidth = container.offsetWidth;
const containerHeight = container.offsetHeight;
const watermarkSize = 200; // 每个水印的近似尺寸（宽度和高度）
const rotation = -30; // 旋转角度
// 粗略计算需要多少个水印来覆盖整个区域
const cols = Math.ceil(containerWidth / watermarkSize) + 2; // 多加一些防止边缘空白
const rows = Math.ceil(containerHeight / watermarkSize) + 2;
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
const watermarkDiv = document.createElement('div');
watermarkDiv.className = 'dynamic-watermark-item-tiled';
watermarkDiv.textContent = text;
watermarkDiv.style.cssText = `
position: absolute; 
