水印应优先用 background-image（如 base64 svg）实现，禁用选中与右键，固定定位防滚动错位，优化 svg 体积与编码，用 rgba 控制透明度并适配深色主题，明确其提示性而非防御性本质。
水印文字被选中复制怎么办
默认情况下，background-image 生成的水印不会被选中，但很多人误用 ::before 或 content 插入文字水印，结果用户一划就全选中、一 Ctrl+C 就带走——这完全违背水印本意。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 坚持用
background-image（哪怕 base64 编码的 SVG）而非伪元素插入文本，这是最稳妥的防复制方式 - 如果必须用伪元素（比如要动态控制水印内容），务必加
user-select: none和-webkit-user-select: none - 别忘了禁用右键：
oncontextmenu="return false"或 CSS 的pointer-events: none（后者慎用，会影响交互）
CSS 水印在滚动时错位或消失
常见现象：页面一滚动，水印就“飘”到左上角不动了，或者只盖住首屏，下面内容完全没覆盖。根本原因是背景定位方式没设对。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 容器必须设
position: relative，且高度撑满（比如min-height: 100vh），否则background-attachment: fixed会失效或错位 - 优先用
background-attachment: fixed+background-position: center center，比local或scroll更稳定 - 避免给水印容器设
overflow: hidden，它会裁掉固定定位的背景图；如需圆角遮罩，改用mask-image或父级clip-path
SVG 水印比 PNG 更清晰但渲染卡顿
用 base64 编码的 SVG 做背景，文字边缘锐利、缩放不糊，但某些低端安卓机或旧版 Safari 会出现首次渲染延迟，甚至白屏几秒。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- SVG 内联时删掉所有注释、
<title></title>、<desc></desc>和冗余属性（如stroke-linecap默认值），能减小 30%+ 体积 - 把 SVG 转成 data URL 后，手动 URL 编码一次（尤其注意
#和%），否则 Chrome 可能解析失败，报错Failed to load resource: net::ERR_INVALID_URL - 对性能敏感场景，降级方案：CSS 生成简单斜向文字（
linear-gradient+transform），不依赖图片资源
水印透明度影响可读性与防截图效果的平衡
opacity: 0.08 看似很淡，实际截图后仍易识别；而设成 0.02 又可能在暗色背景上完全看不见。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不用全局
opacity，改用rgba(0, 0, 0, 0.05)填充文字颜色，这样只降低文字透明度，不影响 SVG 轮廓或渐变细节 - 深色主题下，水印色值要同步切换：用
rgba(255, 255, 255, 0.05)替代黑字，否则直接隐身 - 别依赖透明度防截图——真要防，得结合 canvas 动态绘制 + 定时扰动，纯 CSS 水印本质是“提示性”而非“防御性”
