SVG 背景圖案

常見問題

這些值怎麼用？

把它貼為任意元素的 background 即可，比如 body { background: …; } 或某個 hero 區塊。一個值裡包含了背景色、data URI 圖案磚和 repeat，一條宣告就夠了，圖案磚在橫豎兩個方向都無縫重複。

顏色怎麼改？

值裡正好有兩個顏色：前面的背景 hex，以及 data URI 裡的圖案 hex（經過 URL 編碼，%23 就是 # 號）。把兩處換成你的配色即可。想要更含蓄的質感，可以不改顏色，而是調低 URI 裡的 fill-opacity 或 stroke-opacity。

data URI 背景會產生網路請求嗎？

不會。SVG 隨 CSS 一起傳輸，沒有額外請求，不需要託管檔案，也不會出現背景延遲顯示的閃爍。這裡的圖案磚只有幾百位元組，遠不到需要擔心 data URI 體積的程度。

圖案可以縮放嗎？

可以。在同一元素上加 background-size，比如給 24px 的圖案磚設定 background-size: 48px 48px 就是兩倍。保持所複製值中圖案磚的寬高比例，拼接才不會錯位。