亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

當(dāng)我們用多個對象制作無縫圖案時，我們需要處理對象在邊界上的情況。通常我們創(chuàng)建對象的副本并將它們放置在適當(dāng)?shù)奈恢靡允蛊促N工作無縫銜接。

在 css 中，有一種方法可以做到這一點(diǎn)，而無需手動創(chuàng)建副本或?qū)ξ恢眠M(jìn)行任何計算，方法是利用 CSS background 屬性。

CSS 中的背景默認(rèn)是可重復(fù)的，如果我們使用 background 或 background-image 創(chuàng)建對象，無論它們的位置如何，它們都可以自動平鋪。

element {
  background-image:
    radial-gradient(#6155a6 30%, transparent 0);


  /* default */
  background-size: 100% 100%;
  background-repeat: repeat;
}

創(chuàng)建圖案背景

我們從指定用于平鋪的片段的大小開始。這是必不可少的一步，因為它決定了圖案的可重復(fù)空間。

element {
  width: 180px;
  height: 180px;
}

在背景中使用radial-gradient徑向漸變創(chuàng)建一個圓形對象。

element {
  width: 180px;
  height: 180px;
  background-image:
    radial-gradient(#6155a6 30%, transparent 0);
}

即使你看不到邊緣，圓圈也會正確平鋪。使用 background-position 將它移動到其他地方。不用擔(dān)心越界，瀏覽器已經(jīng)幫我們搞定了。

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;
}

此元素可用于通過平鋪制作無縫圖案。唯一的問題是元素本身不能像背景圖像那樣容易地平鋪。我們需要創(chuàng)建許多相同的元素并將它們放置在網(wǎng)格中。雖然截取元素的屏幕截圖并將其保存為 PNG 格式是一個快速的解決方案。

使用 CSS 涂鴉

css-doodle 提供令人興奮的功能之一是能夠使用 @doodle 函數(shù)從另一個 css-doodle 元素生成背景圖像。如果我們在 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ù)可以嵌套。例如，我們可以將其中一個由 radial-gradient 創(chuàng)建的圓形對象替換為另一個 css-doodle 元素，里面是一個旋轉(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è)計工具創(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ù)種方法可以形成對象，所以我可以想象這是一種非常有用的技術(shù)。

當(dāng)然，最終我們選擇那種方式來實(shí)現(xiàn)，都是根據(jù)我們具體的開發(fā)項目與自己本身所掌握的技術(shù)。