复杂的背景图案

网格

把多个渐变条纹组合起来

css

.box {
  background: white;
  background-image:
    linear-gradient(90deg, rgba(200, 0, 0, .5) 50%, transparent 0),
    linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
  background-size: 30px 30px;
}

也可以描绘网格线，形成网格

css

.box {
  background: #58a;
  background-image:
    linear-gradient(90deg, white 1px, transparent 0),
    linear-gradient(white 1px, transparent 0);
  background-size: 15px 15px;
}

波点

先使用渐变形成圆点

css

.box {
  background: #655;
  background-image: radial-gradient(tan 30%, transparent 0);
  background-size: 25px 25px;
}

用 background-position 移动第二层

css

.box {
  background: #655;
  background-image: radial-gradient(tan 30%, transparent 0), radial-gradient(tan 30%, transparent 0);
  background-size: 25px 25px;
  background-position: 0 0, 12.5px 12.5px;
}

棋盘

先创建一个 $\frac 1 4$ 角

css

.box {
  background: #eee;
  background-image: linear-gradient(45deg, transparent 75%, #bbb 0);
  background-size: 25px 25px;
}

再创建另一边

css

.box {
  background: #eee;
  background-image:
    linear-gradient(45deg, transparent 75%, #bbb 0),
    linear-gradient(45deg, #bbb 25%, transparent 0);
  background-size: 25px 25px;
}

移动第二层图像，可得一半

css

.box {
  background: #eee;
  background-image:
    linear-gradient(45deg, transparent 75%, #bbb 0),
    linear-gradient(45deg, #bbb 25%, transparent 0);
  background-size: 25px 25px;
  background-position: 0 0, 12.5px 12.5px;
}

再创建另一半即可

css

.box {
  background: #eee;
  background-image:
    linear-gradient(45deg, transparent 75%, #bbb 0),
    linear-gradient(45deg, #bbb 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #bbb 0),
    linear-gradient(45deg, #bbb 25%, transparent 0);
  background-size: 25px 25px;
  background-position: 0 0, 12.5px 12.5px, 12.5px 12.5px, 25px 25px;
}

上面实现麻烦，且代码重复性很高，有没有其他方法？

svg

css

.box {
    	background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" fill-opacity=".25"><react x="50" width="50" height="50" /><react y="50" width="50" height="50" /></svg>');
    	background-size: 25px 25px;
}

复杂的背景图案 ​

网格 ​

波点 ​

棋盘 ​

复杂的背景图案

网格

波点

棋盘