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渐变的浏览器来说,背景色可以起到回退的作用。