条纹背景

我相信你肯定也遇到过条纹需求，某天，我接到一个需求，图示：3663

看到斜线条纹了吗？如果放到之前，我会毫不犹豫的将它导出含有4条条纹的贴布，为JPG然后平铺，而今我们有了linear-gradient大法，可以渲染很多你想要的渐变。那这个想下如果用渐变来写，我们该怎么做呢？

……  …… 

先来回忆一下linear-gradient的语法

linear-gradient( top, #ccc, #000);

参数：其共有三个参数，第一个参数表示线性渐变的方向，top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。

想到用渐变然后将渐变更换角度，try it  然后自行渲染看下, 你会回来给我点赞的。

background: linear-gradient(-45deg, #e7e7e7 25%, #f5f5f4 0, #f5f5f4 50%, #e7e7e7 0, #e7e7e7 75%, #f5f5f4 0);

background-size: 42px 42px;

重复线性完美的适用于背景效果，这点得益于它无限循环的天赋，一个渐变图案可以自动重复并且铺满整个背景，因此我们不用再去操心如何创建出贴片无缝拼接了。

还有一种特别酷的方法，有一些场景下我们想要的图案并不是由差异极大的颜色组成，往往会是同一色系，只是在明暗上稍有差别，视觉体现出来会很柔和，这个时候可以将最深的颜色做为背景色，然后将半透明的同色系的条纹叠加在背景色之上，从而得到深浅条纹。来看下代码：

background: repeating-linear-gradient(45deg, #79b, #79b 15px, #58a 0px, #58a 30px);