企业官网建设流程全解析

• 教程
• 文档

导读

本文以 30-seconds-of-code 仓库中 10-css-background-patterns.md 为蓝本，系统讲解 10 个纯 CSS、零图片资源的背景图案（条纹、折线、波点、棋盘格、菱形、纸张、斜纹、三角、波浪、等轴测）的完整实现代码与底层原理。读完本文，你将掌握如何仅用linear-gradient、repeating-linear-gradient、radial-gradient与background-size/background-position的组合，拼出可无限平铺的精致背景纹理，并学会通过调整角度、色标与平铺尺寸自由定制图案。

一、背景图案的核心原理：渐变即纹理

所有 10 个图案都基于同一个思想：CSS 渐变本质上是一张"可无限重复的图"。把渐变当作背景图片，配合background-size设定平铺单元（tile）的大小，再用background-position让多个渐变层之间错位叠加，就能组合出复杂的几何纹理。

• 线性渐变linear-gradient(angle, color stops)：沿指定方向逐色过渡，是条纹、菱形、三角等"色块切割"图案的基础。色标位置可用px、%或关键字，例如#5394fd 25%, transparent 25%表示颜色在 25% 处硬切（硬切点），从而产生锐利的图形边缘。
• 重复线性渐变repeating-linear-gradient：自动把渐变按等长周期重复，适合需要大量重复线段的场景（如棋盘格的两层斜纹），代码比多个linear-gradient叠加更简洁。
• 径向渐变radial-gradient：从圆心向外扩散，波点（polka dot）图案由此而来；repeating-radial-gradient则用于波浪图案的同心波纹。
• 平铺与对齐：background-size: 24px 24px决定每个图案单元的大小；多个背景层用逗号分隔，各自的background-size、background-position独立设置，实现错位叠加。background-repeat默认就是repeat，无需额外声明（原文档中部分示例显式写出）。

本文所有图案统一采用双色：主色#5394fd（蓝色）与底色#fefefe（近白色）。其中波浪图案还使用了带 alpha 通道的#5394fd55，实现半透明叠加效果——只要会写色值，就能替换成任意配色。

二、条纹图案（Stripes）：最简单的一维纹理

这是所有图案中最直观的一种：把一段 24px 宽的"蓝-白-蓝-白"渐变作为平铺单元，横向无限重复。

.lines-2 { background-color: #fefefe; background-image: linear-gradient( to right, #5394fd, #5394fd 12px, #fefefe 12px, #fefefe ); background-size: 24px 100%; }

原理拆解：background-size: 24px 100%让渐变单元宽 24px、高占满容器；单元内前 12px 为蓝色（色标#5394fd到#5394fd 12px），后 12px 跳为白色（#fefefe 12px到#fefefe）。background-color兜底，即使图案加载失败也能保持白色底色。

定制要点：条纹宽度 = 12px 色标位置 × 2；若想要更细/更宽的条纹，同步修改色标位置与background-size即可。改成to bottom或45deg即可获得横纹或斜纹变体。

三、锯齿形图案（Zig Zag）：四层三角叠加

锯齿形是"用三角形拼出折线"的经典套路：4 个 45° 方向的线性渐变，各自切出 25% 的三角形色块，再用background-position让上下两层错位 24px，形成连续的锯齿边缘。

.zigzag { background-color: #fefefe; background-image: linear-gradient(135deg, #5394fd 25%, transparent 25%), linear-gradient(225deg, #5394fd 25%, transparent 25%), linear-gradient(45deg, #5394fd 25%, transparent 25%), linear-gradient(315deg, #5394fd 25%, #fefefe 25%); background-position: 24px 0, 24px 0, 0 0, 0 0; background-size: 48px 48px; background-repeat: repeat; }

原理拆解：135deg、225deg、45deg、315deg四个方向各切出一个三角形（色标25%处从蓝到透明硬切）。前两层在24px 0位置、后两层在0 0位置，水平错位半个平铺单元（48px 的一半），让两排三角形犬牙交错。第 4 层用#fefefe 25%而非transparent，是为了把剩余区域填成白色底，与background-color保持一致。

四、波点图案（Polka Dot）：径向渐变切圆

波点只需一行渐变：径向渐变的两个色标紧紧相邻（1.2px处），硬切出一个实心圆点，其余区域为白色。

.polka { background-color: #fefefe; background-image: radial-gradient(#5394fd 1.2px, #fefefe 1.2px); background-size: 24px 24px; }

原理拆解：radial-gradient默认以元素中心为圆心向外扩散；色标#5394fd 1.2px到#fefefe 1.2px之间没有过渡区间，形成半径 1.2px 的硬边圆点。background-size: 24px 24px决定了圆点间距。

定制要点：圆点大小改1.2px，间距改background-size；把radial-gradient换成radial-gradient(circle at ...)可移动圆点位置。

五、棋盘格图案（Checkerboard）：两层斜纹错位

棋盘格是两层 45° 重复线性渐变的组合：每层先切出 45° 的斜条纹，第二层再水平+垂直错位 24px，两层叠加后便形成黑白交错的方格。

.rectangles { background-color: #fefefe; background-image: repeating-linear-gradient( 45deg, #5394fd 25%, transparent 25%, transparent 75%, #5394fd 75%, #5394fd ), repeating-linear-gradient( 45deg, #5394fd 25%, #fefefe 25%, #fefefe 75%, #5394fd 75%, #5394fd ); background-position: 0 0, 24px 24px; background-size: 48px 48px; }

原理拆解：第一层是"蓝-透明-透明-蓝"的 45° 重复条纹（蓝色占 25%–75% 之外的两段），第二层是"蓝-白-白-蓝"的同款条纹。第二层在background-position: 24px 24px处错位半个周期（48px 的一半），两层的蓝色区域恰好互补、白色区域恰好重叠，拼出棋盘格。值得注意的是该文档在目录中被归类为 cheatsheet，且在 redirects.yaml 中承接了原checkerboard-pattern等旧页面（301 重定向），可见这是对既有多个零散图案示例的整合。

六、菱形图案（Rhombus）：紧凑版锯齿

菱形与锯齿形结构完全相同，唯一区别是background-size从48px 48px收紧为24px 24px——平铺单元变小后，错位叠加的三角形组合出的是更密集的菱形纹理。

.rhombus { background-color: #fefefe; background-image: linear-gradient(135deg, #5394fd 25%, transparent 25%), linear-gradient(225deg, #5394fd 25%, transparent 25%), linear-gradient(45deg, #5394fd 25%, transparent 25%), linear-gradient(315deg, #5394fd 25%, #fefefe 25%); background-position: 24px 0, 24px 0, 0 0, 0 0; background-size: 24px 24px; background-repeat: repeat; }

原理拆解：4 层渐变的方向与锯齿形完全一致，但平铺单元缩小一半后，24px 的错位量恰好等于整个单元宽度，四层三角形的边界在更小尺度上闭合，形成菱形的外轮廓。同一个渐变配方，只改background-size，视觉形态就从"锯齿"变成"菱形"——这是本系列最有教学价值的对比。

七、纸张图案（Paper）：四层网格叠加

纸张纹理由 4 层线性渐变叠加：两层粗网格（120px，线宽 4.8px）+ 两层细网格（24px，线宽 2.4px），粗线描边、细线打点，模拟格纹纸效果。

.paper { background-color: #fefefe; background-image: linear-gradient(#5394fd 4.8px, transparent 4.8px), linear-gradient(90deg, #5394fd 4.8px, transparent 4.8px), linear-gradient(#5394fd 2.4px, transparent 2.4px), linear-gradient(90deg, #5394fd 2.4px, #fefefe 2.4px); background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: -4.8px -4.8px, -4.8px -4.8px, -2.4px -2.4px, -2.4px -2.4px; }

原理拆解：前两层是水平（默认方向）与垂直（90deg）的粗线，后两层是细线；background-size分别定义两组网格密度。关键细节在background-position的负值偏移：-4.8px -4.8px把网格向左上平移半个线宽，使线恰好落在平铺单元的边界上而非被裁掉，保证跨单元线条连续无缝。这是本系列中background-position用法最精妙的一例。

八、斜纹图案（Diagonal）：最省代码的单层条纹

斜纹是 10 个图案里代码最短的：一条repeating-linear-gradient即可完成，连background-size都不需要——重复渐变自带周期性。

.diagonal { background-color: #fefefe; background: repeating-linear-gradient( 45deg, #5394fd, #5394fd 12px, #fefefe 12px, #fefefe 60px ); }

原理拆解：45° 方向、12px 蓝 + 48px 白（12px 到 60px）为一个周期，repeating-linear-gradient自动沿 45° 方向无限延伸。注意此处background-color之后又用background简写覆盖，后者会重置之前的背景设置——实际使用时二选一即可（简写形式更紧凑，但会清空background-image之前的其他背景层，叠图场景需谨慎）。

九、三角图案（Triangles）：单层渐变切半

三角图案同样极简：一个 45° 线性渐变，色标在 50% 处硬切，一半蓝、一半白，再以 24px 平铺。

.triangle { background-color: #fefefe; background-image: linear-gradient(45deg, #5394fd 50%, #fefefe 50%); background-size: 24px 24px; }

原理拆解：45deg对角线把每个 24×24 单元切成两个等腰直角三角形，左上半蓝、右下半白。若将50%调整为其他百分比，三角形比例随之改变——百分比色标是控制图形占空比的核心旋钮。

十、波浪图案（Waves）：径向重复渐变叠加透明层

波浪是本系列视觉层次最丰富的一个：repeating-radial-gradient生成同心波纹，repeating-linear-gradient生成渐变底色，两层叠加出柔和的波浪质感。其中半透明色#5394fd55（55为十六进制 alpha ≈ 33% 不透明度）让上层蓝调透出下层纹理。

.wavy { background-color: #fefefe; background-image: repeating-radial-gradient( circle at 0 0, transparent 0, #fefefe 24px ), repeating-linear-gradient(#5394fd55, #5394fd); }

原理拆解：第一层以容器左上角circle at 0 0为圆心，从透明到白色每 24px 重复一次，产生一圈圈向外扩散的波纹；第二层是蓝色系的重复线性渐变。两层都是重复渐变，无需background-size也能无缝铺满。把24px调小可获得更密的波纹，#5394fd55的 alpha 值则控制波浪的深浅。

十一、等轴测图案（Isometric）：六层渐变拼三维错觉

最复杂的图案：6 层线性渐变、3 组角度（30°、150°、60°）、两组错位，共同拼出等轴测（isometric）风格的立方体堆叠错觉。这与仓库中 isometric-card.md 所讲的"等轴测视角"视觉语言一脉相承——前者用transform: rotateX() rotateZ()塑造立体卡片，这里则用多层渐变在背景上"画"出立体感。

.isometric { background-color: #fefefe; background-image: linear-gradient( 30deg, #5394fd 12%, transparent 12.5%, transparent 87%, #5394fd 87.5%, #5394fd ), linear-gradient( 150deg, #5394fd 12%, transparent 12.5%, transparent 87%, #5394fd 87.5%, #5394fd ), linear-gradient( 30deg, #5394fd 12%, transparent 12.5%, transparent 87%, #5394fd 87.5%, #5394fd ), linear-gradient( 150deg, #5394fd 12%, transparent 12.5%, transparent 87%, #5394fd 87.5%, #5394fd ), linear-gradient( 60deg, #5394fd77 25%, transparent 25.5%, transparent 75%, #5394fd77 75%, #5394fd77 ), linear-gradient( 60deg, #5394fd77 25%, transparent 25.5%, transparent 75%, #5394fd77 75%, #5394fd77 ); background-size: 48px 84px; background-position: 0 0, 0 0, 24px 42px, 24px 42px, 0 0, 24px 42px; }

原理拆解：前三组渐变（30°、150° 各两组）负责立方体的三个可见面中的亮面，用12%/87.5%的极窄硬切区间（12% 到 12.5%、87% 到 87.5%）切出细而锐利的棱线；后两组 60° 渐变用半透明蓝#5394fd77填充暗面，增强立体层次。关键参数：background-size: 48px 84px是非正方形平铺单元（高度 84px），配合background-position中的24px 42px错位（宽高各一半），让棱线在单元边界处精确衔接。60° 角的渐变在这里承担了"暗面宽度"的角色，与 30° 的"亮面棱线"配合，营造出三维立方体的光影。

十二、实战定制指南

1. 换色

把#5394fd换成你的品牌色，#fefefe换成背景色即可。半透明层（#5394fd77、#5394fd55）可改用任意rgba()值，例如rgba(83, 148, 253, 0.47)，便于直观控制透明度。

2. 调尺寸

图案密度由background-size决定：尺寸越大图案越稀疏。修改大小时，务必同步检查background-position的错位值是否仍等于"单元尺寸的一半"，否则图案会在平铺边界处"接缝断裂"（纸张、菱形、等轴测图案尤其敏感）。

3. 调角度与占空比

改变渐变的deg值可旋转整体纹理方向；调整百分比色标（如25%→30%）可改变色块占比。注意百分比与角度是互相耦合的，改了角度往往也要微调百分比才能保持图案美观。

4. 叠加与降级

多个背景层按书写顺序从上往下叠加，最上层最先绘制；background-color永远作为最底层兜底，即使渐变失效也不会出现透明背景。

十三、性能与使用建议

• 零图片、零请求：全部图案由 CSS 渐变即时绘制，不产生额外 HTTP 请求、不增加页面体积，适合作为骨架屏、卡片底色、Hero 区装饰或代码演示区背景。
• 重复渐变优先：需要大量等距线段时，用repeating-linear-gradient/repeating-radial-gradient替代多层linear-gradient，代码更短、可维护性更好。
• 本仓库内的实践参照：同类纯 CSS 视觉技巧可对照 25-css-gradients.md（25 个渐变配色）与 shapes.md（纯 CSS 几何形状）一起查阅；本文档在仓库中位于 CSS Visual 集合（visual.yaml），tag 为visual, cheatsheet，可直接以速查表方式使用。

结语

从单层渐变的条纹、三角，到六层渐变的等轴测立方体，这 10 个图案完整覆盖了 CSS 渐变背景的主流技法：线性/径向/重复渐变的搭配、色标硬切、平铺单元尺寸与错位对齐。理解这些原理后，你不仅能直接复制使用，更能按需组合出自己的无限图案。若想探索更多，MagicPattern 的完整集合与本仓库的 CSS 视觉文章集合 都是不错的延伸参考。

• 教程
• 文档