表格容器需用带position: relative的wrapper包裹，避免直接设置table定位；水印用::before伪元素实现，设content、absolute定位、inset:0、z-index:-1和pointer-events:none；动态内容须JS注入，Canvas绘制更安全。
表格容器必须设 position: relative
水印要准确覆盖在表格内容下方，又不能影响点击、选中等交互，前提是表格或其直接父容器得有定位上下文。如果直接给 <table> 加 position: relative，某些浏览器（尤其是旧版 Safari 和 IE）会破坏表格的默认渲染盒模型，导致列宽错乱或边框塌陷。更稳妥的做法是套一层 <div class="table-wrapper">，再对这个 wrapper 设 position: relative。
- 不要给
<table>本身设position，除非你已确认所有目标浏览器兼容 - wrapper 的
padding或margin会影响水印定位范围，需同步检查 - 若表格用了
display: table的模拟布局，同样适用该 wrapper 方案
用 ::before 伪元素实现水印层，而非 background-image
直接在 wrapper 上写 background-image 看似简单，但会和表格自身的 background-color 或单元格背景冲突，且无法控制旋转角度、文字倾斜、单次居中渲染等关键效果。伪元素才是可控性最强的选择。
- 伪元素必须设
content: ""，否则不渲染 - 必须显式设
position: absolute+inset: 0（或top/left/bottom/right: 0），才能铺满 wrapper 区域 -
z-index: -1是关键：确保它在表格内容之下；pointer-events: none必须加上，否则鼠标悬停会穿透失败 - 文字水印推荐用
transform: rotate(-35deg)，角度太小（如 -15°）易被忽略，太大（如 -60°）则阅读困难
多层背景叠加时，background-image 顺序写反就看不见水印
如果你坚持用 CSS 多背景（比如想同时叠加纹理底图 + 文字 SVG + 渐变遮罩），记住：水印必须放在最右边——因为多背景图层顺序是「从左到右，左上右下」，第一个 URL 在最顶层，最后一个在最底层。水印要透出，就得沉到底层，否则会被主图盖住。
- 错误写法：
background-image: url(main.jpg), url(watermark.svg);→ 水印被盖住 - 正确写法：
background-image: url(main.jpg), url(watermark.svg);改为background-image: url(watermark.svg), url(main.jpg);？不对——这会让水印在上层，遮挡内容。真正该做的是把水印作为**最后一层**：background-image: url(overlay.png), url(main.jpg), url(watermark.svg);，其中watermark.svg是半透明、低 opacity 的矢量图，放在最底层 - 每层的
background-size、background-position必须严格按数量一一对应，漏一个值，后续所有层的位置/缩放都会错位，且控制台零报错 - IE11 及以下不支持多背景，若需兼容，必须用伪元素 fallback
动态水印内容（如用户名、时间戳）必须用 JS 注入，CSS 无法读取运行时数据
CSS 的 attr() 函数只能读取 HTML 元素的 data- 属性，而这些属性通常在页面加载时就固定了。如果水印需要实时反映当前登录用户、打印时间或防截图 ID，仅靠 CSS 不够。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：用 Canvas 绘制文字水印 → 转成
dataURL→ 动态设置 wrapper 的background-image - 轻量做法：JS 生成一个含
data-user="xxx"的 wrapper，CSS 写.table-wrapper::before { content: attr(data-user); }——但此方式可被轻易删掉data-属性绕过 - 注意 Canvas 绘制后导出的 base64 图片体积较大，高频重绘（如滚动监听）会卡顿，建议只在初始化时执行一次
