复杂的背景图案

像贴瓷砖一样，多个贴片平铺开来，可以组成复杂的、美观的背景图案，每个贴片通常有多个渐变图案。

网格

下面这种网格，它的每个贴片尺寸为 30*30，有两条线，上边一条白线，左边一条白线，白线是利用渐变的原理产生的。贴片平铺开后，线与线组合，就产生了网格的视觉效果。

这里有个瑕疵，把 body 标签设置为红色背景，可以发现整个网格的右侧和下侧是没有边线的。

div {
  width: 300px;
  height: 300px;
  background: darkgreen;
  background-image: linear-gradient(white 1px, transparent 0), linear-gradient(90deg, white
        1px, transparent 0);
  background-size: 30px 30px;
}

现在我们找来两种尺寸的贴片，15*15 和 75*75 两种，在这两个贴片上，我们像上面的网格一样，用渐变在上边和左边都画一条白线。

小贴片的白线宽度为 1px，大贴片的白线宽度为 2px。为了更美观，小贴片的白线我们设置了 0.3 的透明度。

div {
  width: 300px;
  height: 300px;
  background: darkgreen;
  background-image: linear-gradient(white 2px, transparent 0), linear-gradient(
      90deg,
      white 2px,
      transparent 0
    ), linear-gradient(hsla(0, 0%, 100%, 0.3) 1px, transparent 0),
    linear-gradient(90deg, hsla(0, 0%, 100%, 0.3) 1px, transparent 0);
  background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
}

大贴片平铺开来，形成了网孔比较大的网格。小贴片平铺开来，形成了网孔比较小的网格。两种网格叠加在一起，就产生了下面的效果。

波点

如果我们能在贴片的中间画一个圆形，再平铺开来，就可以得到一个点阵图。我们可以使用辐射渐变 radial-gradient 画出这个圆。

div {
  width: 300px;
  height: 300px;
  background: peru;
  background-image: radial-gradient(darkorange 30%, transparent 0)
  background-size: 30px 30px;
}

这显得有点呆板了，如果圆点可以错开一点，会更美观。在此基础上，我们再新加一个贴片，贴片尺寸还是 30*30，还是在贴片中间画一个圆形，只不过与前一个贴片相比，向右偏移 15px，再向左偏移 15px。

div {
  width: 300px;
  height: 300px;
  background: darkseagreen;
  background-image: radial-gradient(darkorange 30%, transparent 0),
    radial-gradient(darkorange 30%, transparent 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

棋盘

棋盘这个背景稍微有些复杂，我们都知道，两个直角三角型可以拼接形成一个正方形，这里用了四次渐变，每次渐变都是一个直角三角型图案。

div {
  width: 300px;
  height: 300px;
  background: #eee;
  background-image: linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0), linear-gradient(
      45deg,
      #bbb 25%,
      transparent 0
    ), linear-gradient(45deg, transparent 75%, #bbb 0);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
}