打印水印不显示的主因是浏览器打印引擎对CSS定位、z-index和伪元素解析逻辑与屏幕渲染不同：fixed定位被忽略，z-index无效，::before/after可能为空；应改用绝对定位真实DOM节点+@media print控制，设display:none默认隐藏，打印时display:block，并用rgba透明度替代opacity。
打印时加水印，不能直接复用页面上那套 body::before 固定定位方案——它在多数浏览器打印预览里会被裁掉或压根不渲染。必须用 @media print 单独控制，且得确保水印元素能被真实输出到纸面。
为什么打印水印总不显示？
常见错误是把水印挂 body 上、用 position: fixed + z-index: -1，结果打印时：Chrome 无视 fixed 定位，Firefox 把 z-index: -1 元素当背景直接跳过，Safari 可能连伪元素都不触发。根本原因是打印引擎对 CSS 定位和层叠的解析逻辑和屏幕渲染完全不同。
- 打印样式表中，
position: fixed行为不可靠，应改用position: absolute并配合top/left显式定位 -
z-index在打印上下文中基本无效，靠元素在 DOM 中的顺序决定图层（后出现的覆盖先出现的） - 伪元素
::before/::after在部分浏览器打印时内容为空，必须用真实 DOM 节点 - 透明度别用
opacity，它会让文字边缘发虚甚至消失；改用color: rgba(0,0,0,0.1)
最简可行的打印水印 HTML+CSS
不用 JS，不依赖 Canvas，纯静态方案也能稳定出纸。核心是建一个真实 div，放在 body 最底部，用 @media print 控制显隐和样式：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<div id="print-watermark">机密-仅限内部使用</div>
<style>
#print-watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
font-size: 48px;
color: rgba(0, 0, 0, 0.1);
pointer-events: none;
user-select: none;
z-index: 9999;
/* 默认隐藏，只在打印时显示 */
display: none;
}
@media print {
#print-watermark {
display: block;
}
/* 打印时强制撑满整页，避免被截断 */
html, body {
height: 100%;
margin: 0;
}
}
</style>- 必须设
display: none默认隐藏，否则会干扰屏幕浏览 -
font-size: 48px是底线，小于 36px 的字在 A4 纸上容易糊成灰块 - 不要给
#print-watermark设width/height，靠transform居中更稳 - 如果页面有分页（如多页 PDF），这个水印只会出现在第一页——要每页都打，得用 JS 动态插入多个节点或改用 CSS
@page规则（兼容性差，不推荐）
动态内容怎么塞进打印水印？
比如“张三 - 2026-05-07 10:36”这种带实时信息的水印，CSS 变量在 @media print 里不生效，必须用 JS 注入后再触发打印：
立即学习“前端免费学习笔记（深入）”；
- 在调用
window.print()前，先用document.getElementById('print-watermark').textContent = `机密-${userName} - ${new Date().toLocaleString()}`更新文本 - 更新后需强制重排，可加一句
void document.body.offsetHeight防止浏览器优化掉重绘 - 为防用户手动 Ctrl+P 绕过，可监听
beforeprint事件自动注入，但注意 Safari 不支持该事件 - 若 SSR 渲染，服务端无法获取用户信息，这类动态水印只能客户端生成，别指望首屏直出
真正难搞的不是加水印，而是让水印在不同浏览器、不同打印设置（缩放、页边距、背景图形开关）下都稳定出现。别迷信“一次写完到处打印”，每次换 Chrome/Firefox/Safari 版本都得实测——尤其是那个 rgba 透明度值，0.08 和 0.12 在某些打印机驱动下可能差出一倍清晰度。
