水印背景遮挡表格内容应分离图层：用position: relative容器承载svg/base64水印背景，表格设position: absolute或z-index提升层级，并配pointer-events: none、user-select: none及低透明度文字水印。
水印背景会遮挡表格内容怎么办？
直接用 background-image 给 <table> 加水印，常导致文字看不清、边框断开或单元格错位。根本原因是表格渲染依赖 <code>border-collapse 和单元格盒模型，而背景图默认铺满整个 table 元素盒区，没有独立定位空间。
正确做法是把水印层和表格层分离：用一个包裹容器（如 <div>）承载背景图，再把 <code><table> 叠在上面。这样能控制透明度、缩放和定位，避免干扰表格结构。
<ul>
<li>容器设 <code>position: relative，表格设 position: absolute 或用 z-index 提升层级
opacity: 0.1（不是 rgba()），否则 IE/旧版 Safari 可能不生效如何让水印只出现在表格区域不溢出？
用 background-size: contain 或 cover 容易拉伸变形或超出容器边界。真正可控的方式是用 background-size: 200px 100px（固定尺寸）+ background-repeat: repeat + background-position: center 模拟“平铺但居中对齐”的视觉效果。
更稳妥的是 CSS 伪元素方案：给包裹容器加 ::before，设置 content: ""、position: absolute，再通过 top/left 和 transform: translate(-50%, -50%) 精确锚定水印中心点。
- 伪元素必须设
z-index: -1，否则会盖住表格 - 避免用
background-attachment: fixed，滚动时水印会相对表格错位 - 若表格宽高动态变化，优先用
background-size: 15% 15%这类相对单位，而非像素值
防盗链水印需要显示文字但不能被复制？
纯 CSS 背景图里的文字无法选中，但用户截图、OCR 仍可提取。若真要防搬运，得让水印文字成为 DOM 节点——但又不让它响应鼠标事件或被复制。关键在三处控制：
- 文字用
<div> 叠在表格上，设 <code>pointer-events: none - 加
-webkit-user-select: none和user-select: none阻止选中 - 字体用细线+低对比度（如
color: rgba(0,0,0,0.08)），并旋转transform: rotate(-30deg) - 打印前测试务必用 Ctrl+P → “更多设置” → 勾选“背景图形”再预览
- 若面向企业内网环境，可要求统一部署含背景打印策略的 Chrome 策略模板
- 真正敏感场景别依赖前端水印——它本质是提示性装饰，不是安全机制
注意：不要用 display: none 或 visibility: hidden，否则水印彻底消失；也不要依赖 JS 动态插入，服务端渲染或禁 JS 时会失效。
为什么水印在打印时消失了？
浏览器默认不打印背景图（background-image），这是出于省墨设计。即使加了 @media print { background: … }，多数用户打印机设置里仍勾选了“不打印背景图形”。唯一可靠方案是把水印作为 <canvas></canvas> 或 SVG 内联到 HTML 中，再用 position: fixed 覆盖表格区域。
但要注意：Canvas 水印需监听表格尺寸变化重绘，SVG 则要确保 viewBox 和 preserveAspectRatio 设置正确，否则缩放后文字糊掉或偏移。
