HTML怎么做网格背景_html CSS网格线背景图案实现大全

用repeating-linear-gradient画等距网格线最省事：通过两个渐变（0deg画横线、90deg画竖线）叠加，配合background-size:20px 20px严格对齐周期，避免像素错位，兼容Chrome10+/Firefox16+/Safari6.1+。

用 repeating-linear-gradient 画等距网格线最省事

纯 CSS 实现网格背景，repeating-linear-gradient 是首选——不用图片、不依赖 SVG、兼容到 Chrome 10+/Firefox 16+/Safari 6.1+。它本质是用多层线性渐变叠加出横竖线条，关键在控制色标位置和透明/实色切换点。

常见错误是把色标写成 0%, 1px, 2px, 100% 这类绝对像素值，结果缩放或高 DPI 下线条糊掉。正确做法是用百分比或 calc() 配合变量：

• 横向线：repeating-linear-gradient(to bottom, #ccc 0px, #ccc 1px, transparent 1px, transparent 20px)（每 20px 一条线）
• 叠加纵向线需用两个渐变，用 background-image 同时声明，顺序不影响效果
• 若要响应式网格（如随容器宽高变化），把 20px 换成 calc(1vw) 或 CSS 自定义属性 var(--grid-size)

Grid 容器本身加 grid 属性无法生成背景线

有人试过给 display: grid 的容器设 grid-template-columns: repeat(10, 1fr) 再配 gap，以为 gap 就是网格线——这是误解。gap 只是子项间距，不是背景图案，且无法延伸到容器边缘外。真正要的是覆盖整个区域的视觉线条。

如果你已经用 Grid 布局内容，又想叠加网格背景，直接在同个元素上叠一层 background-image 即可，二者互不干扰：

立即学习“前端免费学习笔记（深入）”；

div {  display: grid;  grid-template-columns: repeat(4, 1fr);  background-image:     repeating-linear-gradient(0deg, #eee 0px, #eee 1px, transparent 1px, transparent 20px),    repeating-linear-gradient(90deg, #eee 0px, #eee 1px, transparent 1px, transparent 20px);}

background-size 和 background-position 决定网格对齐精度

网格线错位、边缘切半、或某条线突然变粗，八成是 background-size 没对齐。比如你设了 20px 间距，但 background-size 写成 19px 19px，渐变周期就被截断，线条就断续。

• 必须让 background-size 等于单个网格单元尺寸，如 20px 20px
• 若要左上角对齐（避免滚动时线条“漂移”），补上 background-origin: padding-box 和 background-position: top left
• 移动端缩放时，用 background-size: 2vmin 2vmin 比固定像素更稳，但注意 vmin 太小会导致线条不可见

需要斜线、三角或极坐标网格？别硬改 linear-gradient

repeating-linear-gradient 只能做直角系网格。想实现 45° 斜线、菱形、六边形甚至同心圆，继续用 CSS 渐变会极其复杂，色标难算、性能差、维护痛苦。

这时候该换方案：

• 斜线/菱形：用 repeating-conic-gradient（Chrome 119+/Safari 16.4+ 支持尚弱，慎用）
• 六边形/复杂图案：导出 SVG Data URL，用 url("data:image/svg+xml,...")，可控性强、缩放无损
• 动态网格（如随鼠标移动偏移）：用 Canvas 绘制并更新 background-image 的 Data URL，但注意重绘开销

多数场景下，坚持用双 repeating-linear-gradient + 合理的 background-size 就够了；花哨需求一上来，就该考虑 SVG 而不是死磕 CSS 渐变参数。