网页水印需用position: fixed实现视口固定覆盖，z-index设为-1避免遮挡交互元素，通过伪元素::before生成倾斜文字，配合硬件加速和字体优化适配高DPI屏幕，但纯CSS方案无法防止截图绕过，强保护需服务端渲染。
水印文字不随滚动偏移，但要覆盖整个页面
网页水印必须固定在视口上，否则滚动时会消失或错位。核心是用 position: fixed + z-index 控制层级，同时避免遮挡可交互元素。
- 水印容器需设
position: fixed、top: 0、left: 0、width: 100vw、height: 100vh -
z-index建议设为 -1，确保不挡按钮/输入框；若内容本身有负 z-index，需同步调整 - 用
transform: rotate(-30deg)倾斜文字，比 CSSwriting-mode更兼容、更易控制角度
用伪元素实现轻量水印，避免 DOM 冗余
不用额外 <div> 标签，直接用 ::before 或 ::after 生成水印，减少 HTML 结构干扰和 JS 操作依赖。
- 给
<body>添加样式：position: relative（伪元素需相对定位父容器） - 伪元素内用
content: "CONFIDENTIAL"，配合font-size、opacity和color控制显隐 - 注意：若页面有
overflow: hidden的祖先容器，可能裁剪水印，应检查父级样式
适配高 DPI 屏幕，防止水印模糊或过细
默认字体在 Retina 屏上容易发虚，尤其倾斜后锯齿明显。必须用 backface-visibility: hidden 和 transform: translateZ(0) 触发硬件加速。
- 在水印伪元素上加
-webkit-font-smoothing: antialiased和text-rendering: optimizeLegibility - 字号建议不低于
48px，太小在高分屏下几乎不可见 - 避免用
background-image方式生成水印——PNG 无法响应式缩放，且增加 HTTP 请求
防止用户截图/录屏时绕过水印
纯 CSS 水印能被开发者工具禁用、被截图工具忽略，或被 PDF 导出剥离。真正防泄漏需服务端渲染水印图层，前端仅作补充。
立即学习“前端免费学习笔记（深入）”；
- 当前方案仅对普通浏览有效；如需强保护，应在后端生成带水印的图片或 PDF
- 不要依赖
user-select: none防复制——右键“查看页面源码”仍可绕过 - 若水印含动态内容（如用户名），必须用 JS 注入并绑定到登录态，不能硬编码在 CSS 中
