早期網頁設計蠻流行加上背景圖，尤其是使用平鋪式背景、以連續重複拼湊出漂亮風格，不僅讓網頁看起來更生動活潑，也不會因圖片太大張拖慢網站速度。之前介紹過的 BgPatterns 和 Bgrepeat 提供許多類似背景圖免費下載，不過如果你覺得這些圖案看起來有點過時，有沒有更新穎的作法呢？不妨參考一下 Hero Patterns。
Hero Patterns 是一款產生重複網頁背景線上工具，收集的樣式都很符合當前網頁設計潮流，允許自訂前景、背景色及透明度，乍看之下好像跟一般圖片產生器沒有差異，但其實它是一款能產生重複背景 SVG 向量格式的產生器。
不用下載任何檔案，只要將 CSS 程式碼加入網站即可輕鬆套用漂亮平鋪式背景！
如果對於 SVG 格式有些了解應該知道，SVG 就是所謂的以程式碼畫圖，也因此不用再下載額外圖片檔案，只要將產生的程式碼加到自己網站 CSS 就能出現背景效果。
網站名稱：Hero Patterns
網站鏈結：https://www.heropatterns.com/
使用教學
STEP 1
開啟 Hero Patterns 網站後，首頁會出現許多重複圖案的平鋪式背景圖（目前大約 40 種），從上方切換不同的前景、背景色及透明度。
STEP 2
Hero Patterns 網站收錄的圖案都很簡單，有些還蠻典雅的，適合各種網站使用，尤其是覺得單色背景看起來太過單調時，Hero Patterns 或許能帶來意想不到的效果。
想起之前介紹過的 Unique Gradient Generator 亦能產生很漂亮的網頁毛玻璃模糊背景，如果你覺得平鋪式背景看起來不符合網頁的設計風格，也能參考這個類似的網站背景產生器。
STEP 3
選擇任一背景後，在 Selected Pattern 頁面還能進行前景、背景色和透明度調整，網頁會直接讓你預覽背景圖案效果，沒問題的話，複製上方產生的 CSS 程式碼，將它加入網站 CSS 代碼的適當位置就能快速套用此背景圖案，是不是很強大呢？
如果要做小細節的編輯調整，也可以從網站來下載產生的 SVG 圖片，而不是 CSS 程式碼，點選右上角「Download unstyled SVG」就能下載圖片。對了，這項服務會不斷更新而且可以永久免費使用喔！