水印不显示主因是z-index过低或父容器overflow裁剪，应设正z-index并检查祖先overflow；模糊问题宜用内联SVG背景；打印需@media print显式启用并加print-color-adjust；动态内容推荐CSS变量注入。
水印文字被遮挡或不显示？检查 z-index 和父容器 overflow
固定定位的水印常被内容层盖住，不是因为没生效，而是层级或裁剪问题。给水印元素设 z-index: -1 是常见错误——它会让水印掉到 body 背景之下，反而彻底消失。正确做法是设一个足够高的正数（如 z-index: -999 其实也行，但更推荐 z-index: 2 并配合父容器清理）。
另一个高发原因是父容器设置了 overflow: hidden 或 auto，而水印用了 position: fixed——此时它本应脱离文档流，但某些浏览器（尤其 Safari）在嵌套 transform 或 will-change 的容器里会“重定义 fixed 的参考系”，导致水印被裁掉。排查时可临时给所有祖先元素加 overflow: visible !important 看是否恢复。
- 水印元素必须设
pointer-events: none，否则会拦截点击事件 - 避免给水印外层套
div并设transform，这会创建新的 containing block，让fixed相对它定位 - 如果页面有滚动条且水印需覆盖全屏，用
top: 0; left: 0; width: 100vw; height: 100vh;，别用100%，后者依赖父高
文字水印模糊、旋转后锯齿严重？优先用 background-image 生成
直接用 div + transform: rotate(-30deg) 做水印，放大缩放或高 DPI 屏下容易发虚。CSS 旋转本质是 GPU 插值渲染，小字号+斜角极易糊。真正稳定的做法是把水印文字转成 SVG 或 Canvas 图片，再作为背景平铺。
最简方案：用 data:image/svg+xml 内联 SVG。它体积小、无请求、支持缩放不失真，还能动态插入变量（如用户名）。注意 URL 编码中的空格、括号、引号要处理，否则背景失效。
立即学习“前端免费学习笔记（深入）”；
- SVG 中文字用
text-anchor="middle"和dominant-baseline="middle"居中，别靠 margin 或 padding - 字体选
font-family: "Helvetica Neue", Arial, sans-serif，避免系统缺失字体导致渲染异常 - 生成 base64 前先用在线工具压缩 SVG，删掉注释和冗余属性，不然内联后 CSS 过长可能触发某些浏览器解析限制
水印在打印 PDF 时不出现？@media print 必须显式启用
浏览器默认会禁用 background-image 和 background-color 打印，所以即使屏幕上看得到，PDF 里大概率空白。这不是 bug，是用户可配置的打印选项（Chrome 设置里叫 “Background graphics”），但不能指望用户手动开。
唯一可靠方式是在 @media print 块里重写水印规则，并确保它不依赖 fixed 定位（打印时 fixed 表现不稳定）。更稳妥的是用伪元素 + content 拼接文字，再用 transform 旋转，同时加 -webkit-print-color-adjust: exact 强制输出背景。
- 不要在
@media print里用display: none隐藏水印容器，否则整个节点不参与打印布局 - 如果用 SVG background，需额外加
print-color-adjust: exact（兼容性：Chrome/Firefox 支持，Safari 需加-webkit-前缀） - 测试时用 Chrome “另存为 PDF”，别只看打印预览，预览有时会误判背景是否启用
需要动态更新水印内容（如登录用户）？避开 JS 操作 DOM，改用 CSS 变量注入
每次改水印文字都去 document.querySelector('.watermark').textContent = ...，既慢又容易错乱（比如异步加载时机不对、重复插入节点）。更好的办法是把变量塞进 CSS 自定义属性，让样式层自己响应。
例如在 ，然后 CSS 里用 content: var(--watermark-text)（伪元素）或 attr(data-text)（需 HTML 同步写入 data 属性）。这样更新只要改一个属性，无 DOM 操作，也不用管 React/Vue 的生命周期。
- 若用伪元素 +
content: var(--watermark-text)，记得设white-space: pre保留空格，否则多词会被压成一串 - 避免在 JS 里拼接完整 CSS 字符串并注入
<style></style>，这会触发全局样式重排，且难以清理 - 服务端渲染场景下，直接把变量写死在 HTML 的
style属性里，比客户端 JS 注入更稳定
