HTML水印仅为视觉提示，非真正版权保护；background-image水印易被删除，因伪元素和背景图属标准CSS层级，无封装加密，且跨域图片需设置crossOrigin='anonymous'并服务端支持CORS。
HTML水印不是版权保护，它只是页面上的一层视觉提示，所有实现方式都运行在用户浏览器里，能被一键禁用、删除或绕过。
为什么background-image水印最容易被移除
很多人把水印塞进 body::before 或直接设 body { background-image: url(...) }，以为“铺满就安全”。实际上，审查元素里点一下那个 ::before 节点，按 Delete 键，水印立刻消失；或者在控制台执行 document.body.style.backgroundImage = ''，同样生效。
- 伪元素和背景图都是标准 DOM/CSS 层级，没有任何封装或加密
-
z-index: -1或pointer-events: none只影响渲染顺序和交互，不增加任何防护能力 - 如果用了外部 PNG 文件，用户还能直接访问
your-watermark.pngURL 下载原始水印图 - SVG base64 方案虽免请求，但 data URL 本身明文可见，解码后文字内容一目了然
canvas.toDataURL() 报错 SecurityError 怎么办
这是跨域图片触发的典型错误：SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement'。Canvas 绘制跨域图片后，若未提前声明权限，浏览器会拒绝导出像素数据——哪怕你只是想生成带水印的背景图。
- 必须给
new Image()实例设置crossOrigin = 'anonymous' - 这个属性要写在
src赋值之前，否则无效 - 目标图片服务器需返回
Access-Control-Allow-Origin: *（或指定域名），否则仍会失败 - 本地文件（
file://协议）下无论如何都会报错，开发时得用本地服务（如http://localhost）
动态水印怎么防用户手动删 DOM 节点
JavaScript 插入的水印 <div class="watermark"> 看似“动态”，其实照样能被审查元素删掉。真正在意防删，得靠轮询检测 + 自动恢复，但要注意别引发性能问题。
立即学习“前端免费学习笔记（深入）”；
- 用
MutationObserver监听document.body子节点变化，发现水印元素被移除就立刻重建 - 避免高频重绘：不要监听
characterData或深度遍历，只关注childList和subtree: false - 水印内容建议绑定当前登录态（如从
localStorage读user_id），否则静态文字意义不大 - 别用
setInterval定时查document.querySelector('.watermark')，既低效又容易被clearInterval干掉
最常被忽略的其实是打印场景：@media print 里没关水印，用户 Ctrl+P 一打，整页带水印输出——而版权方自己可能都不知道这事发生了。
