全屏覆盖水印首选 body::before 伪元素方案（轻量、兼容、无 JS），content 必须带引号，用 position: fixed + transform 居中旋转，font-size ≥48px，rgba 透明色，pointer-events: none 与 z-index: -1 配合，background-image 推荐 SVG Base64 平铺，Canvas 方案可防截图但需适配高清屏与横竖屏。
全屏覆盖水印必须用 position: fixed 或 canvas，靠 background-image 平铺或伪元素 ::before 实现；absolute 容易被局部滚动容器截断，z-index 设错会压不住内容或挡住点击。
body::before 伪元素方案（轻量、兼容、无 JS）
这是最简可行路径，不新增 DOM，IE9+ 支持，滚动自动跟随，但禁用样式即失效。
-
content必须带引号，比如content: "机密"，写成content: 机密不渲染 - 用
position: fixed，别用absolute—— 后者在overflow: auto的容器里会被裁掉 -
transform: translate(-50%, -50%) rotate(-30deg)是居中+倾斜标准写法；直接top: 50%; left: 50%; rotate()会绕左上角转，文字飞出屏幕 -
font-size建议 ≥48px，太小在 Retina 屏糊成灰块；color用rgba(0,0,0,0.08)，别靠opacity控整体透明度，否则影响背景色/渐变 - 必须加
pointer-events: none，否则按钮点不了；z-index: -1要生效，得确保body有position: relative
background-image 平铺 SVG Base64（防截图稍强、性能好）
比 PNG 更优：缩放不失真、体积小、无需额外请求。但它仍是样式层，DevTools 禁用 background 就消失。
- SVG 必须含 alpha 通道，例如文字 fill="#0000001a"（十六进制带两位透明度），不能靠 CSS
opacity降透 -
background-attachment: fixed是关键，缺了它滚动时水印“滑走”，中间大片空白 -
background-size推荐200px 100px起步，太小（如 50×50）在 2K 屏显颗粒，太大浪费带宽 - Base64 编码后塞进
url("data:image/svg+xml,...")，注意 URL 编码特殊字符（空格、 等） - 别设
background-position: center—— 平铺模式下它无效，只起作用的是repeat和size
Canvas 动态绘制（唯一能对抗禁用 CSS / 截图 / 打印的方案）
Canvas 是像素层，不是 DOM 或样式，截图软件通常抓不到原始 canvas 数据，但需监听 resize / scroll 持续重绘。
立即学习“前端免费学习笔记（深入）”；
- 画布尺寸必须乘
window.devicePixelRatio，否则高清屏模糊；canvas.width = window.innerWidth * dpr -
ctx.font用固定单位，如"24px Microsoft YaHei"，rem或vw缩放时文字大小突变 - 旋转前先
ctx.translate(x, y)到绘制中心点，再rotate()，否则文字偏移出画布 - 网格间距
spacing设 100–150px，太密（如 30px）重绘卡顿，太疏（如 300px）中间留白明显 -
z-index: -1+pointer-events: none必须同时设，否则遮挡所有交互
容易被忽略的移动端和打印陷阱
这些细节不处理，水印在 iPhone Safari 或打印预览里就失效。
- 移动端 Safari 对
fixed+pointer-events: none支持不稳定，偶尔仍拦截点击，可加touch-action: none辅助 - 打印预览默认隐藏
fixed元素，得补@media print { #watermark { position: static !important; } } - 横竖屏切换会重置
window.innerWidth，Canvas 方案必须监听orientationchange事件并重绘 - 字体加载失败时，伪元素或 Canvas 水印直接空白，建议 fallback：用 SVG Base64 作兜底背景
- 水印文字别用纯黑
#000，OCR 识别率太高，改用#1a1a1a或rgba(0,0,0,0.1)
