条纹背景

Posted on

利用CSS创建条纹背景，主要应用CSS3两个属性，linear-gradient 线性渐变，以及 background-size 渐变尺寸。

水平条纹

首先有一条基本的垂直线性渐变

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

试着把两个色标拉近一点，渐变色从20%位置开始，到80%结束，即两块实色各自占据20%

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

若把两个色标重合在一起，会产生一个无限小的过渡区域，效果上看没有任何渐变，两块实色各自占据一半的面积

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

通过background-size调整尺寸，背景默认情况下是重复平铺，整个容器便填满了水平条纹

1
2
background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 20px;

调整色标的位置，创建不等宽条纹

1
2
background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;

根据CSS图像规则

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

即#fb3色块位置值标注到30%，#58a色块位置值从30%开始，倘若#58a位置值写的比#fb3位置值小，则#58a位置值会被设置为它前面最大的位置值开始，即依然是30%，这正是我想要的结果，所以可以简写代码，将#58a位置值写为0，这样需要改动条纹宽度时只需要更改前面的位置值

1
2
background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;

举一反三，创建多种颜色条纹，以三种颜色为例

1
2
background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;

比较简单的平行条纹就完成啦!

垂直条纹

垂直条纹和水平条纹的差别在于，需要在开头加上一个额外的参数指定渐变方向，默认渐变方向是to bottom，同时background-size颠倒一下

1
2
background: linear-gradient(to right, /* 或 90deg */ #fb3 50%, #58a 0);
background-size: 20px 100%;

so easy~

斜向条纹

如果改变background-size的值和渐变方向，貌似可以创建斜向条纹，比如45度倾斜，尝试如下

1
2
background: linear-gradient(45deg, #fb3 50%, #58a 0);
background-size: 30px 30px;

显然直接这样写不行
逆向思考如果想要斜向条纹（如下图），基本单元应该是红色圈住的部分，并非上面尝试的2条条纹，而是4条条纹

斜向条纹图片

so，再增加两个色标

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

但是最初想要的条纹的宽度是15px，background-size应该是2*15*√2≈42.426406871px，取个整吧42.4px

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

完成了接近45度的斜向条纹，但是方法不够友好，没办法切换别的角度，比如60度

1
2
background: linear-gradient(60deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 42.4px 42.4px;

这种思维是咬死了渐变方向是45度的前提下进行的，不完美

更好的斜向条纹

必须要先介绍linear-gradient的循环式加强版repeating-linear-gradient，色标无限循环填满整个背景

1
background: repeating-linear-gradient(45deg, #fb3, #58a 30px);

以上指定渐变宽度为30px的渐变图案自动重复并铺满整个背景，据此做条纹效果，完全不用自己创建无缝拼接的基本单元

1
background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

优点总结：第一是减少重复，改变任何一个颜色的时候只需改动两处，第二设置的宽度直接代表条纹宽度，无需计算background-size值，同时长度更加直观，第三是最大的好处，随心所欲改变渐变的角度

灵活的同色系条纹

大多数情况想要的条纹图案不是由差异极大的几种颜色组成的，这些颜色往往属于同一色系，比如

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

以上可以看成由一个主色调#58a和它的浅色变体组成，如果想改变条纹主色调，需要改四处！

改进方法：把最深的颜色作为背景色，同时半透明白色条纹叠加在背景色之上来得到浅色条纹

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

这样我可以更改任意的主色调，只改一处！

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