从线性渐变说起，这个都知道是在一些特殊颜色交替产生渐变的功能。
看一个简单的例子：
效果：
嗯，很丑，红配绿，丑的哭。
我们在修改一下，拉近一下色标：
看看效果：
可以看到在容器高度30%到80%的地方才会有渐变，其他的位置都是存色填充。现在我有一个大胆的想法，如果把这两个色标无限拉近，会发生什么鬼？
看到完全是两个纯色条形组成，其实在交接处有一个很小很小的变化过程，导致欺骗了我们的肉眼。
在这里我们在看一个渐变的一个小知识点：
如果某个色标的位置值比整个列表中在它之前的色标位置值都要小，则该色标的位置会被设置为它前面所有色标位置值的最大值。
有了这个规定我们可以减少代码量的书写，比如上面可以改成这样子：
效果是一模一样的。（自己下去尝试）。
可能还是不能理解和有说服力，我们在举例看一下：
在修改一下：
效果和上面是一样的（不骗你们，自己可以试一下）。
这里讲一下为什么黄色会这么少的原因：
你这样子想就会理解通了，在用渐变的时候，颜色在后面的总是在上面（也就是层级要高一点）
在这里，50%以前是红色，没有问题，在50%-70%是渐变没有问题，在70%以后本来是黄色的，但是绿色在后面而且根据我们上面讲到的那个小知识点，所以绿色就遮住了剩下的黄色。不信，你们可以去掉绿色，黄色就出来了。好了，不在这里做过多的纠结。
进一步修改：
好了，我们的条纹背景出来了。谢谢观看。
嗯，，，开玩笑的，我们怎么只能满足于此了。
现在我们是实现的垂直方向上的条纹，我们修改一下方向再看看：
很好，在换一个角度：
嗯，这tm是真的太丑了，讲道理应该不是这样子的，应该是整体倾斜的。
其实我们在修改background-size之后，背景是默认重复的，45deg是每一个重复的贴片的角度，所以导致这个问题的出现。
现在我们每一个贴片中只有两个条纹：
我们现在增加到四个条纹试一下：
看看：
很好。
是时候解释一下为什么要把background-size的值设置为30px 30px了，
我们先注释掉背景大小部分额代码：
嗯，这个也太粗了把，所以我们加上背景大小做约束，来达到上面的效果。至于我们为什么要用四个条纹也就解释的清楚了。
看起来上面的条纹有点小对吧，我们规定的是背景大小是30px 30px（单个贴片的），想想我们之前水平或者垂直的时候，30px X 30px中包括两个色标，那么每一个色标就是15px（要么是高度，要么是宽度，取决于渐变的方向）。在这种倾斜的情况下，我们在用30px X 30px 肯定是小了的，所以线条是细了一点。
我们来看看是怎么解决的：
看到箭头的所指向，这里是一个直角三角形，中间那个箭头的长度就是我们实际显示的线条的填充值。
所以我们想要这个长度是，那么就需要计算。
这里我为了方便计算，对代码做了以下修改：
得到的效果如下：
我们发现底部蓝色箭头的长度刚好是容器的一半，有了这个条件，我们在恢复成30 X 30，就可以得到底部和左部蓝色箭头的距离是15。
根据初中数学算三角形的面积和勾股定理，结合上述的具体值可以算出，此时的条纹的宽度是小于15的（自己下去算）。
很好，现在我们只要让中间箭头的长度为15，就可以算出底部箭头的长度，然后就可以算出我们背景大小的设置值。
这里就不演示计算过程，算出来应该是42.43（这是一个无限不循环小数，我取两位小数）。
所以代码作如下修改：
结果如下：
现在条纹就跟之前水平或者垂直下的条纹宽度相差无几。但是这种方式太麻烦了，每一次不同的角度还需要计算。
下面我们看一种更好的实现方式：
我们知道不管是线性渐变还是径像渐变各还有一个循环式加强的repeating-linear-gradient和repeating-radial-gradient。工作原理跟前面两种差不多，但是有一点不同的是，色标是无限循环重复的，直到铺满整个屏幕。
我们先看一下基本的用法：
相当于这样子写：
当然这样子写是不能写完的和运行的，反正就是这么一个规律。
看看效果：
可以，很nice，下面我们就直接实现上面之前的效果：
结果如下：
解释一下为什么色标要这样子写：red,red 15px,green 0,green 30px
可以看到0-15是红色，15-0其实就是15-15（请往前面看我之前关于渐变色标值的解释）这里是开始绿色的，然后15-30是绿色，就可以实现条纹的长度是15，然后红色和绿色条纹都有了，剩下的就交给repeating-linear-gradient函数去执行就行了。
很好，我们终于简单的实现了条纹背景，但是还是有不足的地方，那就是我们一般使用这种背景条纹都是在一种主色调的前提下，像这种红绿相间的应该只能我才会有这种想法吧。
所以我们骚骚的修改一下：
效果如下：
我们修改一下主色调为红色
