表格水印需用带position: relative的包裹div，禁用table/tbody定位；多背景须严格匹配图层数量；伪元素方案更灵活但需pointer-events: none及@media print显式支持。
表格容器必须设 position: relative
水印要准确覆盖在表格内容下方，又不遮挡交互，父容器的定位上下文不能缺。直接给 <table> 设 position: relative 是错的——<table> 是替换元素，某些浏览器下会破坏表格布局（比如 border-collapse 失效）。正确做法是包一层 <div class="table-wrapper">，再对这个 div 应用 position: relative。
常见错误现象：水印飘到页面左上角、滚动时错位、表格边框消失。这些基本都是因为定位上下文没落在包裹容器上。
- 不要把
position: relative加到<table>或<tbody>上 - 包裹
div的padding和margin会影响水印定位，建议清空或显式控制 - 如果表格本身有
overflow: auto，水印需跟随滚动，此时伪元素比背景图更可控
background-image 多层叠加时顺序和值数量必须严格匹配
想让水印图层叠在底色之上、又不盖住表格文字，就得用多背景语法。但浏览器对格式极其敏感：第一个 url() 在最顶层，最后一个在最底层；每个 background-* 属性的值数量必须和 background-image 中的 URL 数量一致，否则整条声明静默失效，结果可能是纯白/纯黑容器。
例如要实现「半透明水印图 + 渐变蒙版 + 纯色底」三层效果：
立即学习“前端免费学习笔记（深入）”；
background-image: url('watermark.png'), linear-gradient(rgba(0,0,0,0.02), rgba(0,0,0,0.02)), none;
background-repeat: repeat, no-repeat, no-repeat;
background-position: center center, center center, center center;
background-size: 200px 100px, cover, auto;
注意：linear-gradient() 算作一个图层，none 也占一位，三组值缺一不可。
- 复制粘贴代码时容易混入中文逗号或零宽字符，建议手敲或开启编辑器“显示不可见字符”
- IE9 及以下不支持多背景，需单独提供单层 fallback，比如先写
background-color: #fff - 打印时多背景默认被禁用，
@media print中需显式重置background-image
用伪元素 ::before 实现动态水印更可靠
静态图片水印没法塞用户名、时间戳或权限标识。这时必须用 JS 动态生成伪元素内容，或注入带 data-text 的容器，再用 CSS attr() 读取。但要注意：CSS 的 attr() 只支持字符串，无法做日期格式化，复杂逻辑仍得靠 JS 拼接后写入 textContent 或内联样式。
关键点在于伪元素必须加 pointer-events: none，否则鼠标悬停在水印区域时，<tr> 的 :hover 效果会失效，表格行高亮中断。
- 水印文字倾斜用
transform: rotate(-30deg)，别用图片——缩放失真、SEO 不友好 - 透明度用
color: rgba(0,0,0,0.08)，不用opacity，否则 transform 边缘发虚 - 字体大小推荐
font-size: 4vw或6rem，固定px在高分屏上几乎看不见 - SSR 场景下服务端不执行 JS，水印为空，需在
useEffect或mounted钩子中补全
打印时水印消失？@media print 必须显式放开
Chrome 和 Firefox 默认禁用所有背景图和伪元素，所以即使页面显示正常，PDF 导出或打印预览里水印常为空白。这不是代码问题，而是浏览器策略。解决方法不是换方案，而是补媒体查询。
对伪元素方案，加这条规则即可：
@media print {
.table-wrapper::before {
display: block !important;
content: attr(data-watermark) !important;
}
}
对背景图方案，@media print 中需重新声明 background-image，且不能依赖 opacity 或 filter —— 打印引擎不认这些。
- 打印时颜色建议用
color: #ccc而非rgba()，部分打印机驱动解析不了 alpha 通道 - 水印文字字号在打印时可能过小，
@media print中单独设font-size: 12pt - 绝对定位的伪元素在分页时可能被截断，避免用
top: 0这类固定偏移，改用inset: 0更稳妥
