先介绍文章用到的二个知识点
background-size 属性
语法
background-size: length|percentage|cover|contain;
css线性渐变
linear-gradient(to <side-or-corner>)||<angle>,<color-stop>,<color-stop>)
<side-or-corner> = [left | right] || [top | bottom]
用角度值指定渐变的方向（或角度）。
<color-stop> = <color> [ <length> | <percentage> ]
顺便说下径向渐变：radial-gradient
语法
radial-gradient( [ circle || <length> ] [ at <position> ]? ,
| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,
| at <position> ,
<color-stop> [ , <color-stop> ]+ )值
<position><position>与background-position或者transform-origin类似。如缺省，默认为中心点。<shape>- 渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。
<size>- 渐变的尺寸大小。包含的值见下表尺寸常数表。
<color-stop>- 表示某个确定位置的固定色值，包含一个
<color>值加上可选的位置值（相对虚拟渐变射线的<percentage>或者<length>长度值）。 百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。 <extent-keyword>- 关键字用于描述边缘轮廓的具体位置。以下为关键字常量：
-
常量 描述 closest-side渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。 closest-corner渐变的边缘形状与容器距离渐变中心点最近的一个角相交。 farthest-side与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。 farthest-corner渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
background: linear-gradient(to top,red ,blue );
我们再改下代码：
background: linear-gradient(to top,red 50% ,blue 50%);
background-:
效果图变为：
再改写：
background: linear-gradient(to top,red 50% ,blue 50%);
background-size:100% 30px ;
水平条纹出现
将颜色后面的百分比即色标所在的位置重合，形成了水平条纹效果。
假如写超过二种颜色也是可以的：
background: linear-gradient(to top,red 33.3% ,blue 0%,blue 66.7%,pink 0);
background-size:100% 90px ;
垂直条纹
原来同水平条纹，只需改下background-size和linear=gradient渐变方向
background: linear-gradient(to right,red 33.3% ,blue 0%,blue 66.7%,pink 0);
background-size:90px 100% ;
难点：斜向条纹
假如我们想得到斜向45度的条纹图案，怎么办？
起初我这样写：
background: linear-gradient(45deg,green 50%,yellow 0);
background-size:30px 30px ;
效果如下：
很明显这不是我们想要的。
查询资料，才知道，原来是我们图案中的每个贴片
内部的渐变旋转了45度。而不是把重复的背景旋转了45度。
解决方案：
以这样的贴片
，来铺满整个背景：单个贴片包含了四条条纹：
background: linear-gradient(
45deg,green 25%,yellow 0,yellow 50%,green 0,green 75%,yellow 0);
background-size:45px 45px ;
效果图：
注意：background-size的值不是贴片直角三角形的宽，而是绿色小三角的斜边长度，正在的宽度是它的高。
更好的斜向条纹
假如，需要60度的怎么办？或者10度的？
解决方案：使用linear-gradient()的加强版repeating-linear-gradient()
二者工作方式差不多，只是有一点不同：色标是无限循环重复的。直达铺满整个背景。
好处之一就是不需要background-size，直接在渐变色标中指定长度。
background: repeating-linear-gradient(10deg,green ,yellow 45px);
上面的效果图也可以由重复渐变完成：
background: repeating-linear-gradient(45deg,green ,green 22px,yellow 22px,yellow 45px);
重复条纹的好处就是随意改改角度就好了，不过实现水平和垂直条纹，用linear-gradient。斜向条纹用repeating-linear-gradient。
在处理45度时候，可以把二者结合。
同色系条纹
background: gray;
background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,transparent 0,transparent 30px);
网格
我们甚至可以把多个渐变组合起来，列如，我们可以把水平渐变和垂直渐变条纹叠加起来，会形成如下的桌布图案。
background: white;
background-image: linear-gradient(90deg, rgba(200,0,0,0.5) 50%,transparent 0),
linear-gradient(rgba(200,0,0,0.5) 50%,transparent 0);
background-size: 30px 30px;
效果图：
此外，如果我们希望，网格中的格子可以调整，而网格线条的粗细保持固定，则色标的值为固定长度而不是百分比：
background: #58a;
background-image: linear-gradient(90deg,white 1px,transparent 0),
linear-gradient(white 1px,transparent 0);
background-size: 30px 30px;
效果图;
波点图形：
background：#655；
background-image: radial-gradient(tan 30%,transparent 0),
radial-gradient(tan 30% ,transparent 0);
background-position: 0 0,15px 15px ;//第二层背景的偏移定位置必须是贴片宽高的一半
background-size: 30px 30px;
效果图：
