纯色背景太单调、塞大图又拖慢加载：Hero Patterns 给近百种可调色 SVG 图案，一条 CSS 就能铺满

网页和演示稿的背景是最容易被敷衍的一块：随便一个纯色，或者从素材站找一张占了几百 KB 的大图铺上去。前者显得单薄，后者拖慢加载——尤其当同一张图在页面上要重复出现很多次的时候。

Hero Patterns 提供了另一种更轻的做法：用可平铺的 SVG 图案当背景。SVG 是矢量格式，无论多大都清晰、体积还小；而「可平铺」意味着一张小小的图案就能无缝铺满整个页面，文件大小几乎可以忽略。

它提供什么

• 近百种图案：从最朴素的点阵、条纹、方格、对角线，到六边形、波浪、十字、多边形、几何拼花，风格都很克制，属于「有质感但不抢戏」的那一类。
• 可自由调色：每种图案都能改前景色、背景色和前景不透明度，颜色直接用十六进制填，改完即时预览——配合品牌色系很方便。
• 两种取用方式：可以一键复制生成的 CSS（里面已经内联了 SVG，粘到样式表里就能用），也可以下载未着色的 SVG 文件自己再处理。

参数与授权

可以怎么用

• 网页区块背景：给页头、页脚、侧栏、卡片区铺一层淡纹理，页面立刻不那么「平」。
• 落地页与海报：作为大色块的底纹，上面再压标题，比纯色更有层次。
• PPT / 演示稿封面：把图案当封面底纹，配合品牌色，比用一张图省事也统一。
• App / 后台界面：登录页、空状态页、卡片背景，用低不透明度铺一层，既轻又耐看。

用法上有个小建议：把不透明度压低一点（比如 0.04—0.12），图案是给内容做「垫底」而不是抢注意力的。想要更明显，就调高不透明度或换个对比更强的颜色；想更淡，就降低不透明度——它的参数面板就是为这种微调准备的。

接到项目里：三条路

官方给了三种把它用起来的做法，按项目习惯挑一种即可：

• 复制 CSS——最省事。在网站上选好图案和颜色后复制生成的 CSS，里面已经把你选的那张图案内联成 SVG，粘进样式表、给区块加一个类名就生效。
• 下载 SVG 文件——下载的是未着色的原始图案，可以丢进自己的构建流程，用 CSS 的 background-image 引用本地文件，方便统一管理、离线可用。
• 当 SVG 精灵或 React 组件——想要更细的控制（比如按主题切换颜色），可以把 SVG 直接嵌进组件里渲染，让填充色跟着变量走。

这里有个实践上容易被忽略的细节：图案要和文字保持对比度。图案越密、不透明度越高，压在它上面的文字就越难读。比较稳妥的做法，是把图案层和文字层分开——图案放一个绝对定位的底层，文字放上层，需要时再叠一层半透明遮罩过渡。这样既能拿到纹理质感，也不牺牲可读性。

顺带一提

同一作者还有一个叫 Heroicons 的图标集（Tailwind 团队出品），风格和这些图案是一路的，做 UI 时配套用比较统一。Hero Patterns 本身定位很单一——就是背景图案，没有花哨的模板或编辑器；也正因为单一，它加载极快、上手几乎零成本。如果你只是想给页面加一点质感，又不想为一张背景图背上几百 KB，它会是个省事的选择。