網(wǎng)頁(yè)比較少有背景圖需求，多半都是以單色為主，如果覺得略顯單調(diào)，也能使用紋理材質(zhì)或漸層色做為背景，例如 Paper-co 就有許多日系的紙張紋理材質(zhì)可用做背景，不僅看起來(lái)可以提升質(zhì)感，也不會(huì)影響閱讀造成負(fù)擔(dān)：

若喜歡重復(fù)背景圖 Hero Patterns 可以在不下載任何文件的情況下生成好看的平鋪式背景圖：

本文要介紹的「CSS Background Patterns」是一個(gè)免費(fèi)背景圖生成工具，可以制作漂亮純 CSS 背景素材，網(wǎng)站已提供一些基本圖形設(shè)計(jì)，用戶只要選取后就能立即套用到背景預(yù)覽，除此之外，還能自定義背景、前景色、不透明和間距數(shù)值，實(shí)時(shí)呈現(xiàn)在網(wǎng)站上，對(duì)于想要一些簡(jiǎn)單構(gòu)圖背景、又不想造成閱讀干擾來(lái)說(shuō)是很有用的在線生成器。

用戶可快速?gòu)?fù)制 CSS Background Patterns 產(chǎn)生的圖片背景 CSS 語(yǔ)法，丟進(jìn)網(wǎng)站樣式表單就能套用，完全不用下載或托管圖片文件，也能讓網(wǎng)頁(yè)維持在最精簡(jiǎn)狀態(tài)，避免因?yàn)榧虞d圖片而造成延遲問題。

CSS Background Patterns

網(wǎng)站鏈接：https://www.magicpattern.design/tools/css-backgrounds

使用教學(xué)

開啟 CSS Background Patterns 網(wǎng)站后往下卷動(dòng)就能看到網(wǎng)站提供的背景圖案。

點(diǎn)選圖案右上角的「Preview Pattern」將圖案套用到背景實(shí)時(shí)預(yù)覽效果。

上方有一排編輯器功能可以調(diào)整調(diào)整背景顏色、前景顏色、不透明度和間距，CSS Background Patterns 特色是在設(shè)定后會(huì)立即反映在網(wǎng)站上，就不用逐一下載或重新整理，非常方便。

設(shè)定后進(jìn)行預(yù)覽，沒問題的話點(diǎn)選圖片右上角「Copy CSS Code」就能快速?gòu)?fù)制 CSS 原始碼，將它使用到你網(wǎng)站的樣式表單即可立即套用。

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

• 免費(fèi)背景圖生成器，可快速制作純 CSS 語(yǔ)法的背景圖案
• 在線調(diào)整前景、背景顏色、不透明度和間距等參數(shù)
• 一鍵快速?gòu)?fù)制取得 CSS 程序代碼