HTML无法直接导出水印，所谓“导出水印”实为前端渲染控制或后端生成；常用CSS background-image（base64 SVG）实现滚动固定、重复水印；绝对定位div适合动态开关且需点击穿透；PDF导出需分别适配@media print、html2canvas或服务端Puppeteer。
HTML 中无法直接实现“导出水印”功能
浏览器原生 HTML/CSS/JS 没有 API 能在用户点击“另存为”或“导出网页”时自动插入水印——所谓“导出水印”，实际是前端主动控制内容渲染，或后端生成带水印的文件。用户看到的“添加作者水印”开关，本质是控制页面是否显示一层覆盖式文字/图像，而非干预浏览器导出行为。
用 CSS background-image 叠加半透明文字水印（最常用）
这是最轻量、兼容性最好、且能随页面滚动持续可见的方式，适合“防截图”但不阻断操作的场景。
- 水印必须用
background-image生成 base64 文本图，不能直接写background: "xxx"—— 否则会被 CSS 压缩工具清空或 IE 不识别 - 推荐用
background-size: 200px 200px控制密度，太密影响阅读，太疏容易被裁掉 - 务必设
background-attachment: fixed，否则滚动时水印会“滑走”或重复错位 - 示例：
body.watermarked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ctext x='50%25' y='50%25' font-size='16' fill='rgba(0,0,0,0.08)' text-anchor='middle' dominant-baseline='middle'%3E%20Author%20Name%20%3C/text%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; background-attachment: fixed; }
用绝对定位 div 实现可开关的作者水印层
适合需要动态控制显隐、支持点击穿透、或叠加 logo 图片的场景，但要注意 z-index 和 pointer-events 配置。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 水印
div必须设pointer-events: none，否则会拦截所有下方点击 -
z-index建议设为9999级别，避免被第三方 UI 库（如 antd、element）的弹窗遮盖 - 文字旋转角度推荐
-25deg到-35deg，太正（0°）易被忽略，太斜（-60°）难读 - 开关逻辑只需切换
class或style.display，不要用remove()——否则 React/Vue 更新时可能丢失节点
“导出为 PDF 时带水印”的真实路径
浏览器打印（window.print()）或调用 html2canvas + jsPDF 生成 PDF 时，水印才真正“进入导出结果”。但这两者行为差异很大：
立即学习“前端免费学习笔记（深入）”；
-
window.print()：仅生效于@media print中定义的样式，普通background-image默认不打印，需额外加-webkit-print-color-adjust: exact -
html2canvas：会截取当前屏幕画面，所以 CSS 水印和绝对定位水印都能捕获，但注意它不支持transform: rotate()的子元素精确渲染，建议用 SVG 替代 - 服务端生成（如 Puppeteer）最可靠：把水印作为 DOM 节点注入再截图，可 100% 控制位置、字体、透明度
复杂点在于：用户以为“开关一开，导出就有水印”，其实要同时维护三套逻辑——页面显示、打印样式、客户端截图配置。最容易被忽略的是打印样式表没启用背景图，导致 PDF 里一片空白。
