上一篇文章中我们学会了如何使用渐变实现条纹状的背景，但是实际上条纹背景并不是我们能实现的唯一的背景图案，利用渐变我们可以实现很多更为复杂的图案，本篇会介绍一些其他的简单而实用的背景图案。
# 一、网格网格的原理其实很简单，目前我们已经实现了条纹背景，那么如果我们将条纹背景组合呢？互相穿插组合，那么是不是很简单就实现了各种各样的网格背景。## 1. 实色网格代码如下：
1 | width: 200px; |
1 | width: 201px; |
1 |
|
4. 棋盘
棋牌有点类似于我们在第一步做到的实色网格，不同的是棋盘是由一个实色和一个透明所组成的图案。所以，看似和实色网格类似，但是实现起来无法使用跟实色网格相同的实现方法（不信邪的话可以使尝试一下），那么我们如何实现棋牌类型的图案呢？也不难，我们使用直角三角形进行拼接。还得我们在实现斜向条纹时做的尝试吗？CSS揭秘：5.条纹背景（上）
代码如下：1
2
3
4
5
6
width:200px;
height:200px;
background: #eee;
background-image: linear-gradient(45deg, #bbb 50%, transparent 0);
background-size: 30px 30px;
实际效果。
- 从刚开始的展示图案可以看出来，我们的正方形色块只是对角线的一半，那么我们的一个三角形就是1/4了，所以我们改造一下
代码如下：1
2
3
4
5
6
width:200px;
height:200px;
background: #eee;
background-image: linear-gradient(45deg, #bbb 25%, transparent 0);
background-size: 40px 40px;
实际效果。
- 现在我们得到一半的三角形，那么拼一个正方形还需要一个相反方向的三角形，我们再来一个背景
1
2
3background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
- 到此我们得到了两个直角三角形，那么如何拼接成一个正方形呢？使用background-position调整直角三角形的位置即可。把右上角显示三角形的背景 向下 向左移动就阔以了
1
2
3
4
5
6
7
8
9
width:200px;
height:200px;
background: #eee;
background-image:
linear-gradient(45deg, #bbb 25%, transparent 0),
linear-gradient(45deg, transparent 75%, #bbb 0);
background-position: 0px 0px, -20px 20px;
background-size: 40px 40px;
实际效果。
那么搞定了一个再搞定另外一个就很简单了。1
2
3
4
5
6
7
8
9
10
11
12
width:200px;
height:200px;
background: #eee;
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, -20px 20px,
20px -20px, 0 0;
background-size: 40px 40px;
实际效果。
小结
本篇主要对一些更为复杂的背景图案做出了一些介绍，分别有实色网格图案，边框网格图案，波点图案，棋盘图案，其中：
- 实色网格用到了透明叠加的方法，实现了苏格兰裙一样的背景图案。
- 边框网格实际上是利用1px的渐变边框，实现其实类似纯div的左上border的方法。
- 波点使用到了radial-gradient径向渐变，使用方法和线性渐变相似。
- 棋盘图案则借助了background-position对直角三角形进行定位，以组合出正方形图案。
