使用css实现条纹背景

最近在看css一姐的《CSS SECRETS》，收获很多，墙裂推荐给大家。文中的很多技巧也来自于一姐~

条纹背景在生活中算是一个比较常见的事物，比如地板，包装纸等。这种设计在网页中要如何实现呢？
我们首先应该知道linear-gradient属性中颜色后是可以加length或者percentage参数的，表示渐变的起止点，这意味着什么呢？

background: linear-gradient(greenyellow 30%,#58a 60%)

如下效果:

linear_gradient_test.png

可以看到，渐变的区域已经很小了。

那么如果起止点的值相等呢？！
没错，如果起止点相等，那么渐变区域就消失了

background: linear-gradient(greenyellow 30%,#58a 30%)

linear_gradient_test2.png

如此，图像有了，按照我们背景图片重复渲染的思维，把这个图像当做贴片进行渲染，即配合上background-size属性，也就实现了条纹:

background: linear-gradient(greenyellow 50%,#58a 50%);
background-size:100% 30px;

strip_bg_01.png

三色也是可以的，只需要继续在linear-gradient后添加属性即可：

background: linear-gradient(greenyellow 33.3%,#58a 33.3%,#58a 66.6%,red 66.6%);
background-size:100% 30px；

目前为止我们每次修改各条纹宽度的占比都需要修改2个值，这里有一个小技巧，把后者设置为0。它基于一个CSS规范，如果某个色标的位置值比列表中它之前色标的位置值都小，则该色标的位置值会被设置为之前色标位置值的最大值。
上面的三色条纹可改写为：

background: linear-gradient(greenyellow 33.3%,#58a 0,#58a 66.6%,red 0);
background-size:100% 30px；

垂直条纹

有了之前的铺垫，垂直条纹对你来说应该就很简单了。只需要改变渐变的方向，然后再修改一下background-size的值就可以了。

background: linear-gradient(to left, greenyellow 50%,#58a 0);
background-size:30px 100%;

vertical_strip.png

斜向条纹

上面的方式用来实现斜向的条纹就比较困难了。你可能会想，为什么会麻烦呢？修改linear-gradient的方向不就行了吗？像这样:

background:linear-gradient(45deg,greenyellow 50%,#58a 50%);
background-size:42px 42px;

first_try.png

很明显我们失败了。但是可以看出这个条纹是可控的，上面我们也说过，linear-gradient生成的是图片，我们将之当作贴片，那么怎样的贴片可以拼出斜向条纹呢？
这样:

strip_card.png

于是我们可以修改代码为：

background:linear-gradient(45deg,greenyellow 25%,#58a 0,#58a 50%,
                            greenyellow 0,greenyellow 75%,#58a 0);
background-size:42px 42px;

italic_strip.png

这样的实现方式其实有很大的缺陷，比如如果我们想实现一个倾斜60度的斜向条纹，你可以试试，它就无能为力了。

当然，我既然说出来了，自然就有其它的解决方案。
linear-gradient拥有一个循环加强版本=>repeating-linear-gradient。它和前者的不同在于，色标将会无限循环重复。
比如这样一句代码:

background:repeating-linear-gradient(#fff,#000 30px);

它相当于：

background:linear-gradient(#fff,#000 30px,
            #fff 30px,#000 60px,
            #fff 60px,### 90px,
            ...)

加一个角度：

background:repeating-linear-gradient(60deg,#fff,#000 30px);

repeating_italic_try.png

很棒，我们快要接近正确答案了，现在只需要把我们之前消除渐变的技巧加入即可：

background:repeating-linear-gradient(60deg,greenyellow, greenyellow 15px,
            #58a 0,#58a 30px);
background-size:42px 42px;

见证奇迹吧：

italic_strip_final.png

这种方法最大的优势是现在我们可以随意修改条纹的角度了，而且修改方式非常清晰简单。

还有个补充，有时候其实渐变的颜色间可能是相同颜色明暗差异，即同色系，这样的情况我们用上面的方法要写两个颜色，很明显不是最好的解决方案。我们可以通过在背景色上渲染条纹式的半透明的白色条纹来实现：

background:#58a;
background-image: repeating-linear-gradient(60deg,rgba(255,255,255,.1),rgba(255,255,255,.1) 15px, 
                    transparent 0,transparent 30px);

same_color_strip.png