用::after而非background-image可直接写文本、支持CSS变量动态替换、无需切图；右下角定位用right/bottom比transform更直观，需设pointer-events:none防遮挡交互。
直接用 ::after 伪元素 + position: fixed 就能搞定，不用图片、不改HTML结构，5行CSS起手。
为什么用 ::after 而不是 background-image？
右下角水印常要带文字（如“内部资料”“USER@DOMAIN”），background-image 得提前切图、换内容就得重做；而 ::after 的 content 可直接写文本，支持 CSS 自定义属性动态替换，调试也快。注意：别用 ::before —— 它默认在 DOM 顺序最前，容易被其他 z-index 覆盖出错。
-
position: fixed确保滚动时水印始终贴右下，不随内容位移 -
right: 20px; bottom: 20px比transform: translate()更直观可控，避免旋转后定位偏移 - 必须设
pointer-events: none，否则鼠标悬停右下角会意外触发水印元素的事件（比如遮挡按钮）
opacity 和 color 怎么配才不抢眼？
透明度不是越低越好：opacity: 0.05 在浅色背景上几乎看不见，opacity: 0.3 又太实。实测 color: rgba(0, 0, 0, 0.12)（纯黑+12% alpha）在多数背景色下都清晰可辨且不干扰阅读。字体大小建议用 14px 或 0.875rem，太大易误判为 UI 元素，太小打印时消失。
- 别只调
opacity—— 它会让子元素（如有）也变透明；用rgba()控制颜色透明度更精准 - 避免用
font-weight: bold，加粗文字在低透明度下边缘发虚，影响可读性 - 如果页面有深色模式，记得加媒体查询：
@media (prefers-color-scheme: dark) { color: rgba(255, 255, 255, 0.12); }
如何防止水印被开发者工具一键删掉？
单纯靠 CSS 伪元素的水印，打开 DevTools → Elements 面板删掉 ::after 规则就没了。真要增加点门槛，可以结合 JS 动态注入样式：
立即学习“前端免费学习笔记（深入）”；
const style = document.createElement('style');
style.textContent = `
body::after {
content: "${encodeURIComponent('内部资料 - ' + new Date().getFullYear())}";
position: fixed;
right: 20px;
bottom: 20px;
color: rgba(0, 0, 0, 0.12);
font-size: 14px;
pointer-events: none;
z-index: 9999;
}
`;
document.head.appendChild(style);- 字符串用
encodeURIComponent()防止特殊字符（如括号、空格）破坏 CSS 解析 - 别把这段 JS 放在
里 —— 有些浏览器会阻塞渲染；推荐放在前或用DOMContentLoaded包裹 - 这招防不住熟练用户，但能拦住随手右键“编辑元素”的人，属于成本最低的混淆
真正难绕过的是 Canvas 绘制或服务端注入，但对初学者来说，::after + 固定定位 + rgba 颜色已经覆盖了 90% 的右下角水印场景。关键不是“绝对防删”，而是让修改成本明显高于收益——比如改个文字就得翻控制台、找 JS、解码、再重载，很多人就放弃了。
