[CSS揭秘]条纹背景

背景知识

线性渐变 linear-gradient

不管是线性渐变，还是径向渐变。它们都是用来设置元素的背景图像。

background-image属性可以为一个元素设置一个或者多个背景图像。这些图像在绘制过程中，以Z方向堆叠的方式进行，也就是先指定的图像会在后指定的图像上面绘制，也就越接近用户。元素的border会在背景图像之上绘制(别忘了前面讲的半透明边框)，元素的background-color会在背景图像之下绘制。

案例

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

 

如果将这两个色标拉近一点，设置为background: linear-gradient(#fb3 20%, #58a 80%);那么真正的渐变只会出现在容器中间60%的区域内。如果我们将两个色标重合在一起，会发生什么呢？

 

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

tips:渐变的本质其实是一种通过代码生成的图像，所以能够像对待其他任何背景图像一样来对待，因此可以通过background-size属性来调整它的尺寸。

background-size: 100% 30px; 默认情况下背景图片时重复平铺的,设置background-repeat: no-repeat 使得图片不重复

 

也可以通过调整色标位置来实现不等宽度的条纹,为了避免每次修改条纹宽度都要改动两个值，我们找到了简写方法: background: linear-gradient(#fb3 30%, #58a 0);

如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值

 

创建三种颜色的水平条纹

background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);

background-size: 100% 45px;

 

垂直条纹

在指定渐变色时可以通过一个额外的参数来指定渐变的方向。默认值为to bottom也就是水平条纹。

background: linear-gradient(to right, #fb3 50%, #58a 0);

background-size: 30px 100%;

 

 斜向条纹

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);

background-size: 42px;

 

但是，如果我们想实现30°,60°等不同角度的条纹怎么办？如果只是单纯的修改渐变角度值，显然结果会很糟糕。

linear-gradient和radial-gradient都有一个循环式加强版(重复渐变) repeating-linear-gradient 和 repeating-radial-gradient 重复渐变的特点: 色标是无限循环重复的，直到填满整个背景(background-size区域)。

 

使用重复渐变实现前面的45deg斜向条纹(通过linear-gradient和background-size实现)

 

 将repeating-linear-gradient与background-size相结合也可以实现上述样式。由于小数不精确，个人不推荐使用这种方法。

background: repeating-linear-gradient(45deg, #fb3 0, #fb3 25%, #58a 0, #58a 50%);

background-size: 42.426406871px 42.426406871px;

 

 

灵活的同色系条纹

下面讲解一个小技巧:

如果条纹图案的颜色属于同一色系，差异不大，只是在明度方面有着轻微的差异。这种情况下，按照之前的写法，如果需要调整颜色时，我们需要修改四个颜色值。这时候有个小技巧，把最深的颜色指定为背景色，把半透明白色[hsla(0,0%,100%,alpha)]的条纹叠加在背景色之上得到浅色条纹。这时候只需要修改背景色就可以得到不同颜色变化的条纹。同时对于旧的不支持渐变色的浏览器也能很好的显示背景色。

background: #58a;

background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px);

 

 

结语

本篇，我们通过CSS渐变实现了简单的条纹背景。在下一篇中，我们会通过CSS渐变和叠加的手法，将多个渐变图案进行组合来构造出非常复杂的图案。