最稳妥纯css水印方案是用body::before伪元素，设fixed定位、rotate倾斜、opacity透明、z-index负值，兼容ie9+且随滚动跟随；动态水印需canvas生成data url背景。
用 CSS 伪元素 ::before 叠加文字水印最稳妥
纯 CSS 实现水印，不依赖 JS、不破坏 DOM 结构，兼容性好（IE9+），且能随页面滚动自动跟随。核心是把水印作为 body 或容器的伪元素，用 transform: rotate(-30deg) 倾斜，再通过 opacity 和 z-index 控制透出程度。
实操建议：
- 水印文字必须设
content: "机密";，否则不渲染 - 用
position: fixed;而非absolute，避免被局部滚动截断 - 字体大小建议设为
48px以上，太小在高分屏上会糊成一片 - 背景色留空，只靠
color+opacity: 0.08模拟半透效果，比background-image更易维护
body::before {
content: "内部资料";
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
font-size: 60px;
color: #ccc;
opacity: 0.08;
z-index: -1;
pointer-events: none;
font-family: "Microsoft YaHei", sans-serif;
}
需要动态水印时，用 canvas 生成图片再设为背景
当水印要带用户姓名、时间戳或防截图（如金融类页面），CSS 伪元素就不够用了——它无法拼接变量。这时得用 canvas 绘制文字，转成 data URL，再赋给 body.style.backgroundImage。
关键点：
- canvas 宽高至少设为视口两倍（如
2 * window.innerWidth），否则平铺后水印断裂 - 绘制前必须调用
ctx.translate()和ctx.rotate()，直接rotate会绕画布原点转，导致文字跑偏 - 用
ctx.fillText()而非strokeText()，后者边缘发虚，打印时更难辨认 - 生成的
data URL很长，别硬塞进 CSS 文件，应在 JS 中动态设置body.style.background
background-clip: text 不适合做水印，容易误用
这个属性常被当成“文字镂空水印”方案，但它实际作用是让文字区域显示其父容器的背景，前提是父容器有背景图/色。而水印恰恰是要在已有内容上叠加一层弱化文字——用它反而会让正文文字变透明，本末倒置。
典型翻车场景：
- 给
h1加background-clip: text，结果标题没了，只看到底下页面背景 - 配合
-webkit-text-fill-color: transparent后，文字完全不可见，连屏幕阅读器都读不到 - 在深色主题下，若没同步调整父级背景，水印直接消失
真要“文字型水印”，老实用 ::before；要“内容穿透型效果”，那是遮罩层的事，不是水印。
PDF 导出时水印消失？得单独处理 @media print
浏览器打印预览里，fixed 定位的伪元素默认不显示，所以你网页上看着好好的水印，一按 Ctrl+P 就没了。这不是 bug，是规范行为——打印介质不支持固定定位。
补救办法只有两条路：
- 在
@media print里改用position: absolute，并把top/left设为具体值（比如top: 10cm; left: 10cm;），确保落在纸面范围内 - 更可靠的是：导出 PDF 前用 JS 把水印文字注入每个页面容器（如每页
.page），用绝对定位 + 低z-index，这样打印时它就是普通流内元素 - 千万别依赖
background-image打印水印——多数浏览器会默认禁用背景图打印，需用户手动勾选“背景图形”，不可控
水印最难的从来不是“怎么画出来”，而是“什么时候该出现、什么时候不该出现”。比如后台管理页要水印，登录页反而不能有；移动端横屏时角度得重算；暗黑模式下灰度值要重新调试——这些细节，比写第一行 ::before 花的时间多得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
