纯 CSS 背景图案怎么做:用渐变画出点阵、条纹和格子纹理

给页面铺一层底纹,过去的标准做法是切一张可平铺的小 PNG,再用 background-repeat 拼满。这条路能用,但它有几个绕不开的代价:多一次 HTTP 请求、放大会糊、换个配色就得重新导一张图。其实条纹、格子、点阵这类规则几何纹理,本质上都是颜色按固定周期重复,而 CSS 渐变天生就擅长干这件事。这篇文章讲清用渐变实现背景图案的思路,顺手把可以直接抄走的代码也给你。

为什么不用图片,改用渐变

一张平铺底纹 PNG 通常占几 KB,而且是一次独立的网络请求,排在关键渲染路径上。同样的条纹用渐变写出来只是一段文本,大约 60 到 120 字节,跟着样式表一起下来,不额外占用请求。

更关键的是两点。第一是清晰度:渐变是矢量式的描述,不是像素,所以在 4K 屏、二倍图、页面缩放到 200% 时都锐利不糊。第二是改色成本:位图换配色要重新导出文件,渐变只要改两个十六进制色值,暗色主题和亮色主题可以共用同一段结构。

repeating-linear-gradient 是怎么平铺的

条纹和斜纹的核心是 repeating-linear-gradient。普通的 linear-gradient 只画一次,从头到尾铺满整个元素;加上 repeating- 前缀后,只要你给的色标(color stop)没覆盖到元素边缘,渐变就会按你定义的那一小段周期不断重复下去。

看这一行:

background-image: repeating-linear-gradient(
  45deg,
  #ffe27a 0,
  #ffe27a 16px,
  #1c1c1c 16px,
  #1c1c1c 36px
);

它的意思是:沿 45 度方向,黄色 #ffe27a 占 0 到 16px,深色 #1c1c1c 占 16px 到 36px,然后这 36px 一段不停重复。于是你得到一组斜的警示条纹。把 45deg 改成 0deg 就是横条,改成 90deg 就是竖条。条带宽度和间距全由那几个 px 数字控制,想加密就把数字调小。

点阵和棋盘稍微复杂一点:点阵用 radial-gradient 画一个圆点,再配 background-size 定义重复周期来平铺;棋盘用 conic-gradient 画两个对角色块,同样靠 background-size 拼成格子。原理一样,都是"画一小块 + 定义重复周期"。

一个可以直接复制的完整例子

下面是一段做仪表盘卡片"坐标纸"底纹的完整 CSS。深海军蓝底配暗蓝细线,1px 线宽、28px 间距:

.card {
  background-color: #0b1220;
  background-image:
    repeating-linear-gradient(0deg,  #1e3a8a 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, #1e3a8a 0 1px, transparent 1px 28px);
  background-size: 28px 28px;
}

两条互相垂直的重复渐变叠在一起,一横一竖,交叉出网格。横线那条把蓝色限制在 0 到 1px,剩下 27px 透明;竖线那条同理。改 background-size 里的 28px 就能整体调密度,设计师想要更紧的格子时不用重画任何图。这段我亲自贴进过一个内部后台,首屏请求数没变,放到二倍图笔记本上看,线条依旧是干净的一像素,没有出现位图缩放那种发虚的边。

别踩这两个坑

第一个坑是间距小于或等于条带宽度。如果你把间距设得不比尺寸大,前景色会把整个重复单元填满,图案直接塌成一块纯色。让间距明显大于线宽,比如线宽 4px、间距至少 24px,留出看得见的比例。

第二个坑是复制时漏掉 background-size。点阵、棋盘、十字这类靠 background-size 定义重复周期的图案,如果你只粘了 background-image 那一行,它会按元素整体尺寸渲染一次而不重复,效果完全不对。复制时把整块都拿走,别只抓一行。

不想手算就用工具生成

px 停靠点、角度、background-size 都自己算当然可以,但调一个顺眼的配色和密度,来回试很费时间。CSS 图案生成器把点阵、网格、条纹、棋盘、斜纹、十字六种类型做成了可视化滑块,左边拖参数右边实时预览,满意了一键复制现成 CSS,分享链接还会原样带上当前配置。如果你想要的不是规则图案而是平滑的多色过渡背景,那就换渐变生成器,两者配着用基本能覆盖纯 CSS 背景的大部分需求。

规则几何纹理交给渐变,既省一次请求,又换色即改、缩放不糊,这笔账在大多数页面上都划算。真正需要有机质感(纸张颗粒、手绘噪点)的场景再回头用 SVG 或图片,各取所长。

---

Made by Toolora · Updated 2026-06-13