當我們用多個對象制作無縫圖案時，我們需要處理對象在邊界上的情況。通常我們創建對象的副本并將它們放置在適當的位置以使拼貼工作無縫銜接。
在 CSS 中，有一種方法可以做到這一點，而無需手動創建副本或對位置進行任何計算，方法是利用 CSS background 屬性。
CSS 中的背景默認是可重復的，如果我們使用 background 或 background-image 創建對象，無論它們的位置如何，它們都可以自動平鋪。
element {
background-image:
radial-gradient(#6155a6 30%, transparent 0);
/* default */
background-size: 100% 100%;
background-repeat: repeat;
}創建圖案背景
我們從指定用于平鋪的片段的大小開始。這是必不可少的一步，因為它決定了圖案的可重復空間。
element {
width: 180px;
height: 180px;
}在背景中使用radial-gradient徑向漸變創建一個圓形對象。
element {
width: 180px;
height: 180px;
background-image:
radial-gradient(#6155a6 30%, transparent 0);
}即使你看不到邊緣，圓圈也會正確平鋪。使用 background-position 將它移動到其他地方。不用擔心越界，瀏覽器已經幫我們搞定了。
element {
width: 180px;
height: 180px;
background-image:
radial-gradient(#6155a6 30%, transparent 0);
background-position: -110px -20px;
}我們可以通過添加更多背景圖像來添加更多對象。
element {
width: 180px;
height: 180px;
background-image:
radial-gradient(#6155a6 30%, transparent 0),
radial-gradient(#6155a6 20%, transparent 0),
radial-gradient(#6155a6 10%, transparent 0);
background-position:
-110px -20px,
-20px -75px,
20px 40px;
}此元素可用于通過平鋪制作無縫圖案。唯一的問題是元素本身不能像背景圖像那樣容易地平鋪。我們需要創建許多相同的元素并將它們放置在網格中。雖然截取元素的屏幕截圖并將其保存為 PNG 格式是一個快速的解決方案。
使用 CSS 涂鴉
css-doodle 提供令人興奮的功能之一是能夠使用 @doodle 函數從另一個 css-doodle 元素生成背景圖像。如果我們在 css-doodle 中創建圖案片段，它可以用于背景圖像。這意味著圖案片段可以平鋪。
/* container size */
@grid: 1 / 100% 180px;
/* pattern dimension */
background-size: 180px 180px;
/* pattern fragment */
background-image: @doodle(
@grid: 1 / 100%;
background-image:
radial-gradient(#6155a6 30%, transparent 0),
radial-gradient(#6155a6 20%, transparent 0),
radial-gradient(#6155a6 5%, transparent 0);
background-position:
-110px -20px,
-20px -75px,
20px 40px;
);
使用漸變來創建形狀是相當有限的。幸運的是，@doodle 函數可以嵌套。例如，我們可以將其中一個由 radial-gradient 創建的圓形對象替換為另一個 css-doodle 元素，里面是一個旋轉 30 度的心形。
/* pattern fragment */
background-image: @doodle(
background-image:
@doodle(
@grid: 1 / 100%;
@size: 80px;
margin: auto;
background: pink;
@shape: heart;
transform: rotate(30deg);
),
radial-gradient(#6155a6 20%, transparent 0),
radial-gradient(#6155a6 5%, transparent 0);
background-position:
-110px -20px,
-20px -75px,
20px 40px;
);
如何在實際開發中使用它
我建議使用 PS 和 AI 等設計工具創建圖案背景，但直接從代碼創建一些東西仍然很有趣。所以這里有兩種方法可以將它應用到您的網站：
1)、在 CSS 或 css-doodle 中創建圖案背景片段并截取 DOM 元素，或使用 css-doodle 的 export() API 將圖案片段保存為圖像。
.container {
background-image: url(pattern.png);
background-size: /* fragment size */;
}2)、直接導入并使用 css-doodle。
<style>
css-doodle {
--pattern: (
/* your code */
);
}
</style>
<css-doodle use="var(--pattern)"></css-doodle>
我希望這篇文章很好地解釋了我們如何利用 CSS 背景重復和 css-doodle 來創建無縫背景圖案。有無數種方法可以形成對象，所以我可以想象這是一種非常有用的技術。
當然，最終我們選擇那種方式來實現，都是根據我們具體的開發項目與自己本身所掌握的技術。
