现在比较少网站会用到背景图，但有时候为了要让背景不要太过单调，或是有些变化又不影响阅读，会选择颜色较浅的纹理材质素材，例如 Hero Patterns 可产生平铺式背景 SVG 图，或是 Bg-Patterns 也有不少纹理背景可以免费下载：

当然这些工具都提供基本的设定选项，像是调整大小、密集程度或图片格式，就能透过小张图片拼接成背景，对于网速较慢的来说也不会因此而延迟网站载入速度。

本文要介绍的「Background Image Generator」是一个免费的网页背景图片产生器，来自一家 SiteOrigin 专门提供 WordPress 相关服务的公司，通过产生器使用者可以快速产生各种材质背景图，包括自定颜色、图案、混合模式、图案强度、噪点、反转显示或适用于 Retina 高分辨率的图案。

这些图案是从 Subtle Patterns 收录超过 400 种高品质纹理素材背景而来，SiteOrigin 将它制作成线上工具，让使用者直接设定调整后产生即时预览，对于不擅长使用绘图软件调整图片色彩的使用者来说算是解决了一道难题。

Background Image Generator
网站链接：http://bg.siteorigin.com/

值得一试的三个理由：

产生特定颜色的网页背景素材纹理图
可自订颜色、图案、混合模式、图案强度、噪点、反转显示
素材来自 Subtle Patterns，收录各种高品质纹理素材

使用教学

开启 Background Image Generator 从网站左侧进行调整，预设情况下会有一个浅灰色的背景预览，看得出来它不是单一颜色，其实是以一小张方形图片重复显示拼凑而成，看起来不会太过单调又能填充背景。

从左上角的 Background Color 选择颜色开始，选择后右侧背景颜色会立即更新。

Pattern 收录了许多可用于产生背景图片的素材纹理，不只是这四个，通过鼠标滚轮往下拉动找到更多图案。

底下还有一个「Blend Mode」混合模式，试着点选看看就会搭配出不太一样的感觉。

如果你想增加图案强度或加入噪点（Noise），可将下面选项往右边拖曳，强度和噪点程度就会提高，不过有可能使背景变得更为复杂或难以阅读。常见的 Retina 显示器因为能提供很高解析度的阅读体验，这个工具也能产生适用于 Retina 的背景图片（Generate @2X），有需要的朋友记得勾选此选项。

作者： Pseric