任務路徑 / 從輸入到結果
如何建立 CSS 背景圖案
- 01
選擇圖案
開啟「圖案」，選擇「圓點」「網格」或「斜紋」。三者都只由 CSS 漸層構成——任何環節都不涉及圖片檔案。
- 02
設定平鋪單元
把「平鋪尺寸」選在 8 到 96 px 之間，把「標記寬度」選在 1 到 16 px 之間。標記寬度不能超過平鋪尺寸的一半；否則狀態會顯示「檢查數值」並給出確切規則。
- 03
選擇兩種顏色
「圖案顏色」繪製標記，「畫布顏色」填滿標記下方的底色。預覽會把結果鋪滿整個面板，便於按真實比例判斷平鋪效果。
- 04
按真實比例判斷重複效果
預覽會把結果平鋪到整個面板，對比度太弱和平鋪過密的問題在這裡最容易暴露。經驗法則：圖形保持遠小於平鋪單元的一半——28 px 單元上的 2 px 圖形讀作紋理，而不是噪點。
- 05
複製圖案 CSS
點「複製 CSS」，或點「下載 .css」儲存 toolars-background-pattern.css。.pattern 規則只有三條宣告——background-color、background-image 和 background-size——可以直接套用到任何元素上。
- 06
應用並調整規則
這條規則只繪製背景，放到任何元素上都沒有版面副作用。之後可以調整 background-size 改變圖案密度；當圖案與文字衝突時，降低兩種顏色的對比度，而不是縮小圖形。