明水印必须是真实DOM元素而非background-image，否则会被遮挡、不随滚动、缩放变形、打印丢失且无法防搬运；应使用position:fixed+pointer-events:none的全屏div，配合transform旋转、vw字体、动态网格生成及@media print适配。
明水印为什么不能用 background-image 直接贴图
直接给 body 或容器设 background-image 加透明 PNG 水印，看似简单，但实际会出问题：水印被内容遮挡、无法随滚动固定、缩放后变形、打印时可能不显示。更关键的是——用户选中文字或截图时，水印根本不在 DOM 里，起不到“明示归属/防搬运”的作用。
真正有效的明水印必须是真实 DOM 元素，层叠在内容上方，且具备一定抗干扰能力。
用 position: fixed + pointer-events: none 实现基础覆盖
最轻量、兼容性最好的方案：创建一个全屏 div，用绝对定位铺满视口，再通过 CSS 旋转、重复平铺文字，同时确保不影响用户交互。
-
z-index必须足够高（如9999），但别盲目设2147483647——某些老版 iOS Safari 会失效 -
pointer-events: none是关键，否则所有点击、输入都会被水印层拦截；子元素如需要响应事件，得单独加pointer-events: auto - 文字建议用
transform: rotate(-30deg)而非rotateZ，兼容性更稳 - 字体大小用
vw单位（如8vw），比px更适应不同屏幕
<div id="watermark" style=" position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; pointer-events: none; font-size: 8vw; transform: rotate(-30deg); color: rgba(0,0,0,0.08); text-align: center; line-height: 100vh; font-family: sans-serif; user-select: none; ">CONFIDENTIAL</div>
动态生成多行水印避免留白断层
单个居中文字在宽屏下左右大片空白，窄屏又挤成一团。更稳妥的做法是用 JS 动态计算行列数，生成网格状水印节点。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
核心逻辑：获取视口宽高 → 算出单个水印块的尺寸（比如 200px × 100px）→ 用嵌套循环生成 div 块并绝对定位。
- 不要用
document.write或 innerHTML 拼接大量字符串，性能差且易 XSS；改用document.createElement批量创建 - 每个水印
div都要设pointer-events: none，父容器也需设，双重保险 - 监听
resize事件重绘水印，但加节流（如 100ms），避免频繁触发 - 若页面有横向滚动，
left应基于document.documentElement.scrollWidth计算，而非window.innerWidth
打印时水印消失？加 @media print 强制启用
默认情况下，多数浏览器打印预览会忽略 fixed 和透明度较低的元素。不显式声明，水印在 PDF 导出或打印时就没了。
必须在 CSS 中补充：
@media print {
#watermark {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: auto !important;
opacity: 0.15 !important;
transform: rotate(-30deg) !important;
pointer-events: none !important;
}
}
注意：!important 在这里不是偷懒，而是对抗浏览器打印样式表的默认重置规则。没有它，fixed 在打印上下文中基本失效。
另外，如果页面用了 CSS-in-JS 或 Shadow DOM，水印节点必须挂载到 document.body 顶层，否则打印时可能被隔离丢弃。
