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 就是两倍。保持所复制值中瓦片的宽高比例，拼接才不会错位。