网页水印必须靠css定位+层叠控制实现视觉叠加，核心是让水印“看得见、点不着、不影响内容”；推荐用body::before伪元素最轻量，position: fixed + transform居中倾斜 + z-index:-1配合pointer-events:none，或background-image平铺svg base64，动态内容才需javascript canvas生成。
网页水印不是HTML原生能力，必须靠CSS定位+层叠控制实现视觉叠加，核心是让水印“看得见、点不着、不影响内容”。
用 body::before 伪元素最轻量且兼容
这是纯CSS方案里最稳妥的选择，不新增DOM节点，IE9+都支持，滚动时自动跟随视口。
-
content必须显式声明字符串，比如content: "机密";，空值或未设会导致伪元素不渲染 - 用
position: fixed，别用absolute——后者会被局部滚动容器截断，水印只在局部区域可见 -
transform: translate(-50%, -50%) rotate(-30deg)是居中+倾斜的标准组合，直接写top: 50%; left: 50%再加rotate会绕左上角转，文字飞出屏幕 -
z-index: -1确保水印在所有内容之下，但必须配合body { position: relative }才能生效，否则负值可能被忽略
用 background-image 平铺适合简单重复水印
适合“内部资料”“Draft”这类固定文字或Logo小图，优势是性能好、易缓存，但灵活性差。
- 推荐用 Base64 编码的 SVG 作背景，比如
background-image: url("data:image/svg+xml,%3Csvg...%3E")，避免额外请求且缩放不失真 -
background-attachment: fixed让水印相对视口固定，滚动时不动；若设为scroll，水印会随内容一起滚动，观感像“贴在内容上” - 平铺时注意图片尺寸：太小（如 100×50px）在高分屏上易显颗粒感；太大则浪费带宽。建议 200×100px 起步，再用
background-size微调 - 别依赖
opacity控制整体透明度——它会让整个背景（包括水印和底色）一起变淡；应直接在 SVG 或 PNG 里预设透明度
JavaScript 动态生成水印仅在必要时使用
只有当你需要插入用户ID、时间戳、IP哈希等动态内容，或要对抗简单删除时，才值得引入JS。
- Canvas 绘制水印后转成 Data URL，再赋给
body.style.backgroundImage，注意 canvas 宽高至少设为window.innerWidth * 2，否则平铺时接缝明显 - 用
MutationObserver监听 DOM 变化，一旦检测到水印元素被删，立刻重建——但这治标不治本，有经验的用户仍可禁用 JS 或拦截 observer - 不要把水印逻辑写死在全局变量里，混淆类名、随机生成
id、加!important声明能提高移除门槛，但无法真正防住开发者工具 - 打印样式（
@media print）里记得重置水印：要么隐藏，要么加大透明度，否则纸质文档上水印糊成一片
真正容易被忽略的是 z-index 和 pointer-events 的协同关系：只设 z-index: -1 不够，若父容器没定位上下文（position: relative/absolute/fixed），负值无效；而漏掉 pointer-events: none，水印会吞掉点击事件，表单、按钮全失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
