Hero Patterns 免費 SVG 重複背景圖產生器,CSS 程式碼複製貼上快速套用

Hero Patterns 免費 SVG 重複背景圖產生器,產生 CSS 程式碼複製貼上快速套用

早期網頁設計蠻流行加上背景圖,尤其是使用平鋪式背景、以連續重複拼湊出漂亮風格,不僅讓網頁看起來更生動活潑,也不會因圖片太大張拖慢網站速度。之前介紹過的 BgPatternsBgrepeat 提供許多類似背景圖免費下載,不過如果你覺得這些圖案看起來有點過時,有沒有更新穎的作法呢?不妨參考一下 Hero Patterns。

Hero Patterns 是一款產生重複網頁背景線上工具,收集的樣式都很符合當前網頁設計潮流,允許自訂前景、背景色及透明度,乍看之下好像跟一般圖片產生器沒有差異,但其實它是一款能產生重複背景 SVG 向量格式的產生器。

不用下載任何檔案,只要將 CSS 程式碼加入網站即可輕鬆套用漂亮平鋪式背景!

如果對於 SVG 格式有些了解應該知道,SVG 就是所謂的以程式碼畫圖,也因此不用再下載額外圖片檔案,只要將產生的程式碼加到自己網站 CSS 就能出現背景效果。

網站名稱:Hero Patterns
網站鏈結:https://www.heropatterns.com/

使用教學

STEP 1

開啟 Hero Patterns 網站後,首頁會出現許多重複圖案的平鋪式背景圖(目前大約 40 種),從上方切換不同的前景、背景色及透明度。

Hero Patterns

STEP 2

Hero Patterns 網站收錄的圖案都很簡單,有些還蠻典雅的,適合各種網站使用,尤其是覺得單色背景看起來太過單調時,Hero Patterns 或許能帶來意想不到的效果。

想起之前介紹過的 Unique Gradient Generator 亦能產生很漂亮的網頁毛玻璃模糊背景,如果你覺得平鋪式背景看起來不符合網頁的設計風格,也能參考這個類似的網站背景產生器。

Hero Patterns

STEP 3

選擇任一背景後,在 Selected Pattern 頁面還能進行前景、背景色和透明度調整,網頁會直接讓你預覽背景圖案效果,沒問題的話,複製上方產生的 CSS 程式碼,將它加入網站 CSS 代碼的適當位置就能快速套用此背景圖案,是不是很強大呢?

Hero Patterns

如果要做小細節的編輯調整,也可以從網站來下載產生的 SVG 圖片,而不是 CSS 程式碼,點選右上角「Download unstyled SVG」就能下載圖片。對了,這項服務會不斷更新而且可以永久免費使用喔!

分享本文
Pseric
Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

文章: 6248