真正稳定可缩放的水印网格只能用CSS background-image多图层+repeat实现，需用预旋转PNG/SVG图配合精确background-size，包裹容器必须clean定位上下文。
水印网格对齐必须用 background-image 多层语法
直接用多个 ::before 或一堆绝对定位元素模拟“网格”，既难维护又破坏性能。真正稳定、可缩放、不随内容滚动的水印网格，只能靠 CSS 的 background-image 多图层 + background-repeat: repeat 实现。
关键不是“画多少个”，而是让浏览器一次性渲染一个无限平铺的背景纹理。常见错误是试图用 JS 动态生成 20 个 div 拼成网格，结果水印错位、打印失效、移动端模糊。
-
background-image中每个url()对应一层，必须与background-repeat、background-position、background-size的值数量严格一致 - 想实现「斜向半透明文字网格」，不要用
linear-gradient模拟，而要用真实 PNG/SVG 水印图，设background-size: 180px 180px控制间距 - 若水印图本身带透明底，
background-color可单独设为白色或浅灰，避免深色背景下看不清
为什么不能给 table 或 body 直接加 repeat 水印
给 加 background-image: url(watermark.png); background-repeat: repeat; 看似简单，但实际会覆盖整个视口——包括导航栏、弹窗、侧边栏，且无法和表格内容形成相对定位关系。更严重的是，当表格容器有 overflow: auto 时，水印不会随表格内容滚动，造成视觉割裂。
给 <table> 直接设背景？不行：<code><table> 是替换元素，部分浏览器（如旧版 Safari）对 <code>background-repeat 支持不稳定，且 border-collapse: collapse 会干扰背景绘制区域。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：用一个
<div class="watermark-grid"> 包裹表格，该 div 设 <code>position: relative和overflow: hidden - 水印层必须挂载在这个 wrapper 上，而不是其子元素
- 如果 wrapper 有 padding，要从
background-position中减去偏移，否则网格起点错位 - 常用密度组合：
background-size: 220px 220px（疏）、160px 160px（中）、120px 120px（密） - 若水印图是 200×100px 的横向文字，但想让它斜向铺满，就导出为 300×300px 的带空白边的旋转图，再设
background-size: 300px 300px - 避免用
%做background-position，改用0 0或具体像素值，防止不同分辨率下网格相位偏移 - 打印时水印消失？加上
@media print { .watermark-grid { background-image: url(watermark-print.png) !important; } } - 伪元素方案只适用于：版权文字单点、固定位置、不需平铺的场景
- 网格水印的复杂度不在“怎么写”，而在“怎么导出水印图”——建议用 Figma 或 Illustrator 导出 300dpi 透明 PNG，宽度/高度严格等于你设定的
background-size - 上线前务必在 iOS Safari 和 Chrome DevTools 的 Device Mode 下检查水印是否错行、是否被裁切
控制水印密度和角度的关键参数
所谓“均匀对齐”，本质是控制单个水印单元的尺寸、间距与旋转角度。CSS 本身不支持在 background-image 中旋转图片，所以得提前把水印图做成带倾斜角度的 PNG（比如 -30° 文字），再用 background-size 和 background-position 定义网格步长。
伪元素方案只适合单点水印，不适合网格
有人尝试用 .watermark-grid::before { content: "CONFIDENTIAL"; transform: rotate(-30deg); opacity: 0.08; } 再配合 position: absolute + top: 50%; left: 50%，这只能做出一个居中水印，没法复制出“网格”。强行用 box-shadow: ... 多层投影模拟，性能差、边缘糊、缩放失真。
真正需要网格效果时，伪元素唯一合理用途是叠加一层纯色蒙版（比如 linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03))），用来柔化底层水印图的硬边，但它本身不能构成重复结构。
水印网格的成败，90% 取决于那张图的尺寸、角度和透明度是否精确匹配 CSS 中的 background-size 与 background-repeat；剩下 10% 是包裹容器的定位上下文是否干净——任何多余的 transform、perspective 或 will-change 都可能导致平铺错位，且难以排查。
