一起来做条纹的背景

条纹背景

之前说到条纹背景，我个人一般采用背景图片repeat的方式做。
今天学到《css揭秘》第一章第五节，这种条纹是可以通过css来实现的。

水平条纹

我们来做个最初的demo，有一条基本的垂直线性渐变，颜色从#fb3过渡到#58a，猛戳看效果，我们也可以试着把这两颜色拉近一些，做一下修改

   background: linear-gradient(#fb3 20%,#58a 80%);

也就是容器顶部的20%区域被填充为#fb3颜色，而底部20%区域被填充为#58a，真正的渐变色只会出现在容器60%的区域，如果感到好奇，可以猛戳上面demo地址自行改变百分数的值，在线看效果。

“如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那个位置突然变化，而不是一个平滑的渐变过程”—— CSS图像（第三版）

若把两个百分数全改成50%，猛戳看效果。这样就已经没有任何的渐变效果了，本质上，我们是已经创建了两条巨大的水平条纹。
随后我们来加一个background-size，猛戳看效果，通过改变百分数的值，也可以得到不等宽的条纹猛戳看效果。

“如果每个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置会被设置为它前面所有色标位置值的最大值”—— CSS图像（第三版）

下面我们来看一个三种颜色水平条纹的demo：猛戳看效果

垂直条纹

垂直条纹的代码跟水平条纹的代码几乎是一样的，区别在于：需要在开头加上一个额外的参数来制定渐变的方向。在水平条纹中，默认值是to bottom所以我们不需要设置。

    background: linear-gradient(to right/*或者90deg*/,#fb3 20%,#58a 80%);

猛戳看效果

斜向条纹

按照上面垂直条纹的思路，我们把90deg换成小于90的数字，是不是就可以得到了呢？猛戳看效果，结果不尽人意。原因很简单，因为我们只是把内部的渐变转成了45度，而不是把整个背景都旋转了。联系勾股定理

$$斜边 = { \sqrt{b^2 + a^2}}{}$$
所以我们将 background-size的值算出来就可以了。