同色系条纹

CSS实现同色系条纹

在大多数情况下，我们使用的条纹并不是颜色相差较大的几种颜色组成的，往往是属于同色系的。例如实现下图所示的条纹图案

实现方式：

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

不足：使用了两个同色系的颜色，想要改变这个条纹的主色调，需要修改4个地方，也没能体现出这两个颜色之间的关系。

更好的实现思路：将深色作为背景色、同时把半透明白色的条纹叠加在背景之上得到浅色的条纹。

background:  #58b;
        background-image: repeating-linear-gradient(30deg,
        hsla(0,0%,100%,.2),hsla(0,0%,100%,.2) 30px, 
        transparent 0, transparent 60px);

优点：
1. 当要改变背景主色调的时候，只需要修改一处；
2. 对于不支持CSS渐变的浏览器来说，背景色可以起到回退的作用。