最稳方案是用background-image实现水印，因其属于渲染层、难被截图剥离；须用透明PNG或base64 SVG，设background-repeat:repeat、background-size控制疏密、background-attachment:fixed防滑动，禁用opacity调透明度。
水印用 background-image 最稳，别用绝对定位堆 div
直接在 body 或根容器上设背景水印，比用多个 div 层叠覆盖靠谱得多。后者容易被截图工具绕过（比如只截 viewport 内容），也干扰页面滚动和点击穿透；而 CSS 背景是渲染层的一部分，截图软件一般无法剥离。
关键点：
- 水印图必须是透明 PNG，文字带 alpha 通道，否则白底压不住内容
- 用
background-repeat: repeat铺满，background-size控制疏密（如200px 200px） - 务必加
background-attachment: fixed，否则滚动时水印会“滑走”，失去覆盖感 - 透明度靠图片本身控制，
opacity会把整个背景变淡，连渐变或阴影都弱化，不推荐
canvas 生成动态水印更灵活，但得防右键保存
如果水印要含用户姓名、时间等变量，或需倾斜 + 低透明度 + 多行，canvas 是更好选择。它能实时绘制文字并转成 Data URL 作为背景，截图软件通常拿不到原始 canvas 数据。
注意几个实操细节：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
ctx.rotate()倾斜前，先ctx.translate()到中心，否则文字会画歪出画布 - 文字用
ctx.fillText()而非strokeText()，后者边缘太锐利，易被图像识别提取 - 生成的 Data URL 很长，别硬塞进 HTML 里，应赋给
body.style.backgroundImage - 禁用右键是障眼法，加
oncontextmenu="return false"只防小白，真想保存的人绕得过去
纯 CSS 文字水印？小心 z-index 和打印失效
有人用伪元素 ::before 叠一层 position: fixed 的水印文字，看似简单，但问题不少：
- 若页面有
transform、filter或will-change的容器，可能创建新层叠上下文，导致水印被压在下面 - 打印预览时，
fixed元素默认不显示，得额外写@media print { ... position: static; ... } - 移动端 Safari 对
fixed+pointer-events: none支持不稳定，偶尔仍会拦截点击 - 字体加载失败时，水印直接消失，不如 PNG 背景兜底
防截图没银弹，水印只是第一道视觉提示
所有前端水印都拦不住专业截屏或录屏——毕竟内容终归要渲染到显存。它的真正作用是：让截图传播时带上可追溯标识，对内部协作或敏感文档分发有意义。
如果你真需要强保护：
- 敏感内容别全量吐给前端，用服务端动态裁剪 + token 验证图片链接
- 浏览器全屏时监听
document.fullscreenElement，临时模糊关键区域（但录屏仍有效） - 水印文字别用纯黑色（
#000），选略带灰度的深色（如#1a1a1a），降低 OCR 识别率
水印位置、角度、密度这些参数，得在真实设备上多试几次——PC 上看着稀疏的，在 iPad 截图里可能糊成一片。
