現在比較少網站會用到背景圖，但有時候為了要讓背景不要太過單調，或是有些變化又不影響閱讀，會選擇顏色較淺的紋理材質素材，例如 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），有需要的朋友記得勾選此選項。