Hero Patterns：免费无缝平铺背景图在线生成工具，可导出SVG、CSS

早期网页设计蛮流行加上背景图，尤其是使用平铺式背景、以连续无缝拼凑出漂亮风格，不仅让网页看起来更生动活泼，也不会因图片太大张拖慢网站速度。网上有很多这样的在线生成工具， Hero Patterns就是其中一个。

Hero Patterns 工具简介

Hero Patterns 是一款产生无缝网页背景在线工具，收集的样式都很符合当前网页设计潮流，允许自定义前景、背景色及透明度，乍看之下好像跟一般图片产生器没有差异，但其实它是一款能产生无缝背景 SVG 向量格式的产生器。

不用下载任何文件，只要将 CSS 样式代码加入网站即可轻松套用漂亮平铺式背景！

如果对于 SVG 格式有些了解应该知道，SVG 就是所谓的以程序代码画图，也因此不用再下载额外图片文件，只要将产生的程序代码加到自己网站 CSS 就能出现背景效果。

网站名称：Hero Patterns
网站链接：http://www.heropatterns.com/

Hero Patterns 使用教程

步骤一：开启 Hero Patterns 网站后，首页会出现许多无缝图案的平铺式背景图（目前大约 40 种），从上方切换不同的前景、背景色及透明度。

步骤二：Hero Patterns 网站收录的图案都很简单，有些还蛮典雅的，适合各种网站使用，尤其是觉得单色背景看起来太过单调时，Hero Patterns 或许能带来意想不到的效果。

步骤三：选择任意一个背景后，在 Selected Pattern 页面还能进行前景、背景色和透明度调整，网页会直接让你预览背景图案效果，没问题的话，复制上方产生的 CSS 代码，将它加入网站 CSS 代码的适当位置就能快速套用此背景图案，是不是很强大呢？

如果要做小细节的编辑调整，也可以从网站来下载产生的 SVG 图片，而不是 CSS 程序代码，点选右上角“Download unstyled SVG”就能下载图片。 对了，这项服务会不断更新而且可以永久免费使用喔！

（来源：免费资源网络社区）