現(xiàn)在比較少網(wǎng)站會(huì)用到背景圖，但有時(shí)候?yàn)榱艘尡尘安灰^(guò)單調(diào)，或是有些變化又不影響閱讀，會(huì)選擇顏色較淺的紋理材質(zhì)素材，例如 Hero Patterns 可產(chǎn)生平鋪式背景 SVG 圖，或是 Bg-Patterns 也有不少紋理背景可以免費(fèi)下載：

當(dāng)然這些工具都提供基本的設(shè)定選項(xiàng)，像是調(diào)整大小、密集程度或圖片格式，就能透過(guò)小張圖片拼接成背景，對(duì)于網(wǎng)速較慢的來(lái)說(shuō)也不會(huì)因此而延遲網(wǎng)站載入速度。

本文要介紹的「Background Image Generator」是一個(gè)免費(fèi)的網(wǎng)頁(yè)背景圖片產(chǎn)生器，來(lái)自一家 SiteOrigin 專(zhuān)門(mén)提供 WordPress 相關(guān)服務(wù)的公司，通過(guò)產(chǎn)生器使用者可以快速產(chǎn)生各種材質(zhì)背景圖，包括自定顏色、圖案、混合模式、圖案強(qiáng)度、噪點(diǎn)、反轉(zhuǎn)顯示或適用于 Retina 高分辨率的圖案。

這些圖案是從 Subtle Patterns 收錄超過(guò) 400 種高品質(zhì)紋理素材背景而來(lái)，SiteOrigin 將它制作成線上工具，讓使用者直接設(shè)定調(diào)整后產(chǎn)生即時(shí)預(yù)覽，對(duì)于不擅長(zhǎng)使用繪圖軟件調(diào)整圖片色彩的使用者來(lái)說(shuō)算是解決了一道難題。

Background Image Generator

網(wǎng)站鏈接：http://bg.siteorigin.com/

值得一試的三個(gè)理由：

• 產(chǎn)生特定顏色的網(wǎng)頁(yè)背景素材紋理圖
• 可自訂顏色、圖案、混合模式、圖案強(qiáng)度、噪點(diǎn)、反轉(zhuǎn)顯示
• 素材來(lái)自 Subtle Patterns，收錄各種高品質(zhì)紋理素材

使用教學(xué)

開(kāi)啟 Background Image Generator 從網(wǎng)站左側(cè)進(jìn)行調(diào)整，預(yù)設(shè)情況下會(huì)有一個(gè)淺灰色的背景預(yù)覽，看得出來(lái)它不是單一顏色，其實(shí)是以一小張方形圖片重復(fù)顯示拼湊而成，看起來(lái)不會(huì)太過(guò)單調(diào)又能填充背景。

從左上角的 Background Color 選擇顏色開(kāi)始，選擇后右側(cè)背景顏色會(huì)立即更新。

Pattern 收錄了許多可用于產(chǎn)生背景圖片的素材紋理，不只是這四個(gè)，通過(guò)鼠標(biāo)滾輪往下拉動(dòng)找到更多圖案。

底下還有一個(gè)「Blend Mode」混合模式，試著點(diǎn)選看看就會(huì)搭配出不太一樣的感覺(jué)。

如果你想增加圖案強(qiáng)度或加入噪點(diǎn)（Noise），可將下面選項(xiàng)往右邊拖曳，強(qiáng)度和噪點(diǎn)程度就會(huì)提高，不過(guò)有可能使背景變得更為復(fù)雜或難以閱讀。常見(jiàn)的 Retina 顯示器因?yàn)槟芴峁┖芨呓馕龆鹊拈喿x體驗(yàn)，這個(gè)工具也能產(chǎn)生適用于 Retina 的背景圖片（Generate @2X），有需要的朋友記得勾選此選項(xiàng)。