只使用一个渐变时，我们能创建的图案并不多。当我们把多个渐变图案组合起来，让它们透过彼此的透明区域显示出来时，神奇的事情发生了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复杂的背景图案</title>
<style>
.box{
width: 150px;
height: 150px;
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;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
在某些情况下，我们希望网格中每个格子的大小可以调整，而网格线条的粗细同时保持固定。
这里我们使用长度而不是百分比：
background: #58a;
background-image:
linear-gradient(white 1px, transparent 0),
linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;
当我们需要改变网格的尺寸时、线宽或者任何颜色时，我们可以很容易地找到需要编辑的地方。
改变图案的任何一个要素时，我们不需要做大量的修改，而是只需要修改一到两个值。
background: #58a;
background-image:
linear-gradient(white 2px, transparent 0),
linear-gradient(90deg, white 2px, transparent 0),
linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
background-size: 75px 75px, 75px 75px, 15px 15px, 15px 15px;
不同线宽，不同颜色网格图案叠加
波点这里我们用到径向渐变radial-gradient，它允许我们创建圆形、椭圆、或是它们的一部分。
background: #655;
background-image: radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
我们也可以生成两层圆点阵图案
background: #655;
background-image:
radial-gradient(tan 30%, transparent 0),
radial-gradient(tan 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
这里的窍门是用两个直角三角形来拼出我们想要的方块。
background: #eee;
background-image:
linear-gradient(45deg, #bbb 50%, transparent 0);
background-size: 30px 30px;
接着我们希望这个三角形只占据贴片面积的1/8,而不是1/2。我们把色标的位置从50%改为25%
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0);
同理，如果我们把这两个色标顺序逆转，就可以得到：
background-image:
/*linear-gradient(45deg, #bbb 25%, transparent 0);*/
linear-gradient(45deg, transparent 75%, #bbb 0);
接着我们把这两个组合在一起：
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
这时我们把第二层渐变在水平位置和垂直发方向均移动贴片大小的一半，就可以得到一个完整的方块。
background: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0 0, 15px 15px;
background-size: 30px 30px;
这里我们就完成了棋盘的一半，我们只需要把现有的这一组渐变再重复一份即可，并且编译它们的定位值。
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-position: 0 0, 15px 15px, 15px 15px, 30px 30px;
background-size: 30px 30px;
这样我们就得到了我们想要的棋盘。
,
