【免費】CSS 背景語法產生器 Background Image Generator，輕鬆製作各種網頁背景

「加三嘻行動哇 Yipee! 成為好友」

【Facebook、Youtube、Twitter、Instagram、Telegram、Line】

為了要讓網站背景不要太單調，有時會選擇在背景加上圖片或材質紋理，讓整體看起來更舒服一點。這次分享的「Background Image Generator」網站可以免費產生背景圖片，只要滑鼠點一點、選擇喜歡的顏色、挑選圖案之後就可以看到背景圖案樣式，還能下載是用在電腦或Retina 高解析度螢幕的圖案。

【網站介紹】

網站名稱：Background Image Generator

網站網址：按我前往網頁

特色：

(1) 可自訂調整背景顏色。

(2) 選擇喜愛的圖案、圖案強度、噪點…等。
(3) 素材來自 Subtle Patterns。

【使用教學】

第一步：進入「Background Image Generator」網站，這個網站設計很簡單，左側是控制調整欄位，右側灰色是背景預覽，一開始預設是灰色背景，我們可透過左側設定進行調整。

第二步：首先調整的是背景顏色，左上方 Background Color 選項下方的色票號碼即可自行調整想要顏色，選擇後右側預覽背景會立刻更新。

第三步：選擇喜愛的顏色後，可以從「Pattern」挑選背景材質紋理圖案，圖案選單看起來雖然只有 4 種，但其實只要往下捲動就能找到更多圖案。

第四步：除了可以選擇顏色、紋理圖案之外，還有個「Blend Mode」，它有很多種不同的搭配方式，可以讓背景紋理顯示不同的樣貌。

在「Blend Mode」模式下方，還有「Pattern Intensity」、「Noise 噪點」滑桿功能，調整滑桿就能讓背景有不同顯示。此外，還有「Invert Pattern」和「Generate @2X」兩個選項可以勾選。其中，「Generate @2X」選項是適用於 Retina 顯示的背景。