用repeating-linear-gradient实现网格背景需双正交渐变叠加，background-size必须统一且与停止点严格对齐，background-blend-mode须与多图层同声明，避免ie不兼容及低端设备重绘卡顿。
background-image 用 repeating-linear-gradient 画网格线
网格背景本质是两条正交的重复渐变线：一条水平，一条垂直。必须用 repeating-linear-gradient，不能用普通 linear-gradient，否则只画一次就停了。
常见错误是把角度写反或停止点错位，导致线条断开或变虚。正确写法要确保“透明 → 实色 → 透明”区间明确：
- 水平线：
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(0,0,0,0.1) 10px, rgba(0,0,0,0.1) 11px) - 垂直线：
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(0,0,0,0.1) 10px, rgba(0,0,0,0.1) 11px) -
background-size: 20px 20px控制网格密度；改小值（如10px）会让线更密，改大值（如40px）则稀疏
background-blend-mode 必须和多图层写在同一个 background 声明里
想让网格线和底色混合出柔和纹理（比如深色底+浅灰线），得靠 background-blend-mode。但它只对同一 background 属性内逗号分隔的图层生效。
错误写法：background-image: url("grid.png"); background-color: #222; background-blend-mode: multiply; —— 这里 background-color 是独立层级，不参与混合，background-blend-mode 直接失效。
正确写法是把所有内容塞进一个 background 简写中：
div {
background:
repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(255,255,255,0.08) 10px, rgba(255,255,255,0.08) 11px),
repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(255,255,255,0.08) 10px, rgba(255,255,255,0.08) 11px),
#222;
background-blend-mode: overlay, overlay, normal;
background-size: 20px 20px, 20px 20px, auto;
}
注意三点：
-
background-blend-mode的值数量必须和图层数一致，顺序严格对应 - 底色不能用
background-color单独写，得作为第三层放进background值里 -
overlay比multiply更适合浅色线+深底，避免过暗发黑
rgba 渐变模拟多层半透底色时，layer 顺序决定覆盖关系
如果网格需要叠加在渐变底色或带蒙版的背景上，别用 background-color: rgba() —— 它不支持多值，第二项会被浏览器静默丢弃。
必须用 background: linear-gradient(rgba(), rgba()), ... 形式模拟每层纯色。例如：
background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)), /* 底层蒙版 */ repeating-linear-gradient(...), /* 网格线层 */ #1a1a1a; /* 最底层纯色 */ background-size: 100% 100%, 20px 20px, auto; background-blend-mode: normal, overlay, normal;
关键点：
- 逗号最左边是底层，最右边是顶层；渲染时从右往左绘制，所以网格线层要写在蒙版层之后、底色层之前
- 每层都加
background-size和background-repeat，否则默认auto会拉伸纹理图或让渐变错位 - alpha 值别堆太高：两层
rgba(0,0,0,0.5)叠加不是全黑，而是灰紫色，且整体对比度下降；建议底层用0.05–0.1，网格线用0.08–0.12
Safari / Firefox 兼容性与性能提醒
repeating-linear-gradient 和 background-blend-mode 在 Safari 8+、Firefox 30+、Chrome 35+ 都支持，但 IE 完全不支持。如果项目还需兼容 IE，得 fallback 到 PNG 纹理图。
性能方面，超过三层 repeating-linear-gradient 或高密度小尺寸（如 5px 5px）网格，在低端 Android 设备上可能触发重绘卡顿。实测建议：
- 网格线粗细控制在
1–2px范围内，用11px − 10px = 1px这种写法比直接设1px更稳 - 避免同时用
repeating-linear-gradient+background-blend-mode+opacity，三者叠加会强制 GPU 合成，iOS Safari 尤其敏感 - 调试时打开 Chrome DevTools 的 Rendering 面板，勾选 “Paint flashing”，看网格区域是否频繁重绘
真正容易被忽略的是：父容器没设 background-color 时，多层背景的底层会和白色画布混合，看起来颜色偏亮；上线前务必检查外层容器是否透出意外底色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
