水印需精准覆盖表格下方，关键在于给表格父容器设 position: relative 以建立定位上下文，伪元素用 transform: rotate(-45deg) 和 color: rgba() 控制倾斜与透明度，加 pointer-events: none 防交互阻断，并通过 css 变量或 textcontent 动态注入防 xss，打印时需 @media print 显式显示。
表格容器必须设 position: relative
水印要精准盖在表格下方，而不是整个页面底部，关键在于定位上下文。如果直接给 table 元素加 ::before，它会相对于最近的已定位祖先（可能是 body）定位，导致水印偏移甚至飞出视口。所以必须把定位锚点落在表格父容器上。
- 给包裹
table的div加position: relative，不加则伪元素默认相对body定位 - 不要给
table自身设position: relative—— 表格是替换元素，部分浏览器下会破坏边框合并（border-collapse）行为 - 若表格嵌套在
overflow: auto的容器里，水印需随滚动同步移动，此时不能用position: fixed，否则水印“悬停不动”
::before 伪元素倾斜 + 透明度控制要点
文字水印最常用方案是用伪元素，但 opacity 和 color: rgba() 效果完全不同：前者会让整个伪元素变淡（含 transform 后的边缘），后者只调文字颜色，边缘更锐利。
- 必须写
content: "机密"，空字符串或缺失该声明，伪元素不会渲染 - 倾斜用
transform: rotate(-45deg)，别用 CSS 图片 —— 高分屏下模糊、缩放失真、无法选中 - 透明度优先用
color: rgba(0, 0, 0, 0.08)，而非opacity: 0.08；后者会使文字抗锯齿失效，打印时几乎不可见 - 字体大小建议用
font-size: 6vw或font-size: 3rem，固定px在 Retina 屏上会小得难以辨识
水印层不能挡住用户操作
水印在视觉上位于表格下方，但 DOM 层级上它仍是覆盖层，若未处理交互穿透，点击表头排序、勾选复选框都会失效。
- 必须加
pointer-events: none，否则鼠标事件被水印截断 - 必须设
z-index: 1（或更低，如-1），但前提是父容器已设position: relative，否则负值无效 - 避免同时设
user-select: none—— 这个属性对伪元素无效，纯属冗余；真正防复制靠后端权限或截图限制，前端仅作提示
动态水印别拼接 HTML 字符串
当水印需含用户名、时间戳等变量时，CSS 伪元素无法读取 JS 变量，必须用 JS 注入。但直接 innerHTML = `...${username}...` 有 XSS 风险，尤其用户名来自后端接口。
- 用
textContent设置水印文字内容，杜绝脚本执行 - 优先改 CSS 变量：
container.style.setProperty('--watermark-text', username)，再在 CSS 中用content: attr(data-text)或content: var(--watermark-text) - SSR 场景下，服务端渲染时 JS 未执行，水印为空 —— Vue 用
mounted、React 用useEffect补全 - 打印时水印常消失，需显式加
@media print { .table-container::before { display: block !important; } }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
