本文簡介

你負責點贊，我負責更新~

這次要用純CSS做一個波點背景，先上圖看看效果。

我把這個效果寫在 body 上，如果你不喜歡這個配色也可以自己手動改改。

思路

我實現上圖的效果思路是，最先想到使用 background-image ，然後使用 radial-gradient 畫圓。再配合預設給個背景色，應該差不多可以了。

需要提醒一下，background-image 不單隻能插背景圖，也可以通過代碼實現漸變效果（之前遇到一些實習生不清楚這點~）。

於是我做了這幾步：

1. 將body的寬高設為 100%
2. 將 margin 設為 0
3. 設置預設背景色 background-color
4. 設置圓形背景 background-image: radial-gradient

於是代碼變成這樣

<style>
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #655;
    background-image: radial-gradient(#f5dab8 30%, transparent 0);
    background-size: 60px 60px;
  }
</style>

我使用 background-size 設置波點的大小。你可以根據自己項目實際需求來設置。

是有一點效果了，但此時的波點是橫豎有序排列的。我希望這些波點能錯開排列。

於是我又想到，可以做多一層波點，然後使用 background-position 將2層波點錯開排列。

為了讓錯開排列後還是保持著整齊的感覺，所以我用的技巧是錯開的距離是波點的一半大小。

也就是說，background-position = background-size / 2 。當然，這句是偽代碼。

改進後的代碼添加了兩句：

/* 省略部分代碼 */
background-image:
  radial-gradient(#f5dab8 30%, transparent 0),
  radial-gradient(#f5dab8 30%, transparent 0);
background-size: 60px 60px;
background-position: 0 0, 30px 30px;

background-image 里有2層 radial-gradient，background-position 也分別設置了每一層的位置。

最終效果如下所示

完整代碼

<style>
  body {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: #655;
    background-image:
      radial-gradient(#f5dab8 30%, transparent 0),
      radial-gradient(#f5dab8 30%, transparent 0);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
  }
</style>

推薦閱讀