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