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

為了要讓網站背景不要太單調,有時會選擇在背景加上圖片或材質紋理,讓整體看起來更舒服一點。這次分享的「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 顯示的背景。

上圖這張圖片就是利用「Background Image Generator」網站製作的背景素材圖片,有需要的朋友可以試試唷!

延伸閱讀:

設計師好有心!「illlustrations」插圖素材開放下載,提供個人及商業使用

日本背景音樂、音效素材網站「DOVA-SYNDROME」,隨時更新、提供商業使用

強大去背網站「Rmove.bg」,圖片上傳 5 秒立刻去除背景

平面設計「DesignBundles」,提供可商用情境圖、插畫、照片、Icon、背景等素材

Screenshot Machine 一秒擷取網頁畫面,轉存圖片或 PDF

圖片及資料來源:Background Image Generator


大家對網站文章上的一個讚、+1及轉分享,都是對我們的最好的鼓勵及繼續下去的原動力,請大家不要吝嗇。