优先用 ::after 实现全屏水印是为避免与 vue/react 条件渲染生成的首节点冲突，::before 易被误判为内容前置导致定位偏移；::after 更稳定挂载末尾，配合 position: fixed 层级控制更可靠。
为什么用 ::after 而不是 ::before 实现全屏水印
两者功能一致，但实际中优先选 ::after 是为避免和某些框架（如 Vue 的 v-if、React 的条件渲染）生成的首节点冲突——::before 在 DOM 渲染初期可能被误判为“内容前置”，导致定位偏移或被覆盖。而 ::after 更稳定地挂载在元素末尾，配合 position: fixed 时层级控制更可靠。
::after 全屏平铺水印的关键 CSS 属性组合
核心不是“单个水印居中”，而是让一个伪元素视觉上无限重复、无缝覆盖整个视口。这靠的是 background-repeat: repeat + 宽高撑满 + 旋转错位实现“类平铺”效果，而非真用多个元素。
-
position: fixed：脱离文档流，锚定视口，不随滚动消失 -
top: 0; left: 0; width: 100vw; height: 100vh：强制覆盖整个可视区域（注意不用100%，否则受父容器限制） -
background-image: url(...)或content: "文本"：图片水印用背景图；文字水印必须用content+transform: rotate() -
background-size: 200px 200px（图片）或font-size: 48px（文字）：控制单个水印单元大小，太小易糊，太大显稀疏 -
opacity: 0.12：实测 0.1–0.15 是兼顾可读性与低干扰的临界值，再低易被忽略，再高影响阅读 -
pointer-events: none：必须加，否则会拦截所有点击/拖拽/选中文本
防篡改：仅靠 CSS 无法真正防删，但能提高移除成本
用户通过 DevTools 删除 ::after 伪元素是瞬时完成的，CSS 本身无防御能力。所谓“防篡改”是指让水印不易被批量清除或意外覆盖：
- 不要把水印样式写在全局
body::after—— 会被后续同名规则覆盖。应绑定到一个不可删的根容器，例如#app::after（Vue/React 主节点）或.watermark-root::after - 避免使用
!important，它反而暴露意图、易被针对性覆盖；改用更高优先级选择器，比如html body .watermark-root::after - 搭配极简 JS 监控：用
MutationObserver检查目标容器是否还存在::after所依赖的 class 或 style，一旦消失立刻重插style标签（非重插 DOM） - 文字水印慎用
text-shadow：它本质是描边，缩放或高对比度模式下极易失效，且无法旋转，平铺感弱
常见翻车点：平铺错位、滚动条遮挡、移动端适配失效
这些不是代码写错，而是对 CSS 视口单位和层叠逻辑理解偏差导致的“看起来没问题，上线就露馅”：
- 用
width: 100%代替100vw：当页面有垂直滚动条时，100%= 父容器宽度（不含滚动条），导致右侧留白；100vw= 视口全宽，始终严丝合缝 - 没设
z-index: -1却指望水印在内容下：伪元素默认z-index: auto，和父元素同层，必须显式设负值才能沉底（主内容再设z-index: 1） - 移动端旋转文字水印字体模糊：iOS Safari 对
transform: rotate()+ 小字号渲染差，建议font-size≥ 36px，或改用 SVG 内嵌文字 - 背景图水印在 Safari 上不平铺：旧版 Safari 对
background-repeat: round支持不稳定，统一用repeat+ 合理background-size更稳妥
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
