表格水印不能直接用background-image套在<table>上，因其display:table不创建层叠上下文，子元素会切割背景且滚动时随内容移动；应加在父容器上，用position:relative+::before+absolute+z-index:-1+pointer-events:none实现。
表格水印为什么不能直接用 background-image 套在 <table> 上？
因为 <table> 默认是 display: table，不创建新的层叠上下文（stacking context），且其子元素（如 <tr>、<td>）会“撑开”背景，导致水印被切割、错位或只出现在部分单元格里。更糟的是，滚动时水印会随内容一起动，失去“底层标识”意义。
真正可行的做法是把水印加在表格的**父容器**上，并确保该容器有明确的定位上下文：
- 给包裹
<table>的<div>设置position: relative - 水印用
::before伪元素 +position: absolute定位到底层 -
z-index: -1或干脆不设z-index（靠文档流顺序压在表格下方） - 务必加
pointer-events: none，否则鼠标 hover/click 会被水印拦截
background-image 水印平铺时 background-size 和 background-repeat 怎么配？
水印图片本身必须是带透明度的 PNG（别指望靠 CSS 的 opacity 调整——它会让整个伪元素变淡，包括可能存在的文字边框或阴影，干扰可读性）。实际排版中，这两个属性组合决定视觉密度和对齐效果：
- 想均匀覆盖整个表格区域 → 用
background-repeat: repeat+background-size: 200px 150px（数值按水印图原始比例微调，避免拉伸变形） - 只想居中一个大水印 →
background-repeat: no-repeat+background-position: center+background-size: 60%（百分比相对容器宽高，比固定像素更适应响应式） - 水印文字倾斜又重复？别用图片，改用 Canvas 生成 Base64 图片再赋给
background-image，否则纯 CSS 无法对repeat内每个实例单独旋转
伪元素水印文字怎么避免遮挡表格内容又保持可读？
文字水印不是越大越醒目，关键在“存在感”与“不可忽视性”的平衡。常见翻车点：字体太细看不清、角度太小像装饰线、颜色对比不足被表格背景吞掉。
立即学习“前端免费学习笔记（深入）”；
- 推荐旋转角：
transform: rotate(-30deg)（-25° 到 -35° 区间最易识别，又不会让文字堆叠成块） - 字号建议：容器宽度的 8%～12%，比如父容器宽 800px，就设
font-size: 64px - 颜色别用纯灰，用
color: rgba(0, 0, 0, 0.12)或color: rgba(255, 255, 255, 0.18)，具体取决于表格背景明暗 - 加一层极浅描边提升轮廓：
text-shadow: 0 0 8px rgba(255, 255, 255, 0.08)（仅当背景复杂时启用）
动态水印（如用户名+时间戳）怎么插入又不拖慢渲染？
JavaScript 插入水印要避开重排（reflow）陷阱。每次修改 DOM 都可能触发表格重绘，尤其当表格行数多、列数多时，卡顿明显。
- 不要在
document.querySelectorAll('table')后逐个appendChild水印<div>—— 改用insertAdjacentHTML直接写入父容器的innerHTML开头 - 水印内容用
data-*属性存，CSS 用attr(data-watermark)读取，避免 JS 频繁操作样式 - 时间戳别每秒更新 —— 只在页面加载时生成一次，除非业务强要求实时（那得用
requestAnimationFrame节流） - 如果表格由框架（如 React/Vue）渲染，水印必须等
mounted或useEffect完成后再注入，否则节点还没挂载就操作会失败
水印真正的难点不在“怎么加”，而在“加完之后用户是否还能顺畅选中文本、复制数据、导出 Excel”。所有样式和脚本都得绕着这个前提做取舍。
