@条纹背景

今天娃娃来和宝宝们一起画条纹喽~
“开心不？” “...一点儿都不开心” 。。。呵呵哒~

看了两遍，有些地方娃娃还是觉得有点乱，一定是娃娃太笨了。

背景渐变用过吧，娃娃好喜欢用background的linear-gradient画彩虹，每次用的时候都要画一截彩虹鼓励自己（是有多缺爱）。

CSS Secrets @条纹背景 - CSS娃娃 - CSS娃娃的博客 这么漂亮的彩虹只需要一行代码：

background: linear-gradient(#cc0033, #ff3333, #ffff33, #66cc33, #66ccff, #336699,#660099);

还是为了效果明显，换一组颜色：

background: linear-gradient(red, green, pink, blue, orange, purple, yellow);

如果括号里面不写百分比的话，那七种颜色之间就会均匀过度。

CSS Secrets @条纹背景 - CSS娃娃 - CSS娃娃的博客

拿这七个颜色来讲，

如果括号里面某些颜色后面写上了百分比，比如酱紫：

background: linear-gradient(red 10%, green 25%, pink 50%, blue, orange, purple, yellow 75%);

CSS Secrets @条纹背景 - CSS娃娃 - CSS娃娃的博客

聪明的宝宝们一定会发现规律的：

10%之前：都是red；
10%到25%之间：red ~ green；
25%到50%之间：green ~ pink；
50%到75%之间：pink ~ blue ~ orange ~ purple ~ yellow；
75%之后：都是yellow。

看下两个颜色的：

background: linear-gradient(blue 45%, yellow 55%);

CSS Secrets @条纹背景 - CSS娃娃 - CSS娃娃的博客

background: linear-gradient(blue 50%, yellow 50%);

CSS Secrets @条纹背景 - CSS娃娃 - CSS娃娃的博客

background: linear-gradient(blue 55%, yellow 45%);

CSS Secrets @条纹背景 - CSS娃娃 - CSS娃娃的博客

background: linear-gradient(blue 55%, yellow 0);

CSS Secrets @条纹背景 - CSS娃娃 - CSS娃娃的博客

当blue为45%、yellow为55%的时候，在45%~55%之间是有过度区域的；当blue为50%、yellow<=50%的时候，过度区域消失，在blue值的地方blue瞬间转变为yellow；Lea姐姐教给我们一个值为0的用法，当yellow颜色的值为0时，yellow会从前面blue值的位置瞬间出现。

看下四个颜色的：

background: linear-gradient(pink 10%, green 0, blue 50%,yellow 0);

CSS Secrets @条纹背景 - CSS娃娃 - CSS娃娃的博客

可以看出，green从前面pink值10%的位置开始出现，过度倒blue值50%；
由于yellow的值为50%，所以yellow从50%的位置瞬间出现。

那如果连续出现值为0的颜色呢？

background: linear-gradient(pink 10%, green 0, blue 0,yellow 0);

Paste_Image.png

background: linear-gradient(pink 10%, green 0, blue 0,yellow 50%);

Paste_Image.png

OMG，前面green、blue被黄色吞掉了； 后面的green被blue吞掉了，但是blue从10%到50%过度到了yellow。

好了，现在知道两次重复条纹怎么画了：

background: linear-gradient(pink 25%, yellow 0, yellow 50%, pink 0, pink 75% ,yellow 0);

Paste_Image.png

我也知道三个条纹怎么画了：

background: linear-gradient(pink 33%, yellow 0, yellow 66%, blue 0);

Paste_Image.png

如果不希望这三个颜色只出现一次就充满了整个height，那好办，加个background-size就能解决：因为如果不特意规定no-repeat的话，background会乖乖地重复直至填满整个height呢~

background: linear-gradient(pink 33%, yellow 0, yellow 66%, blue 0);
background-size: 100% 43px;

CSS Secrets @条纹背景 - CSS娃娃 - CSS娃娃的博客

---

-----------------------------------华丽丽分割一下-----------------------------------

以上是横向的条纹，如果想要竖向的条纹呢？

好办，Lea讲到了两种办法，分分钟解决！

1. 加个方向/角度就OK啦~

background: linear-gradient(90deg ,pink 33%, yellow 0, yellow 66%, blue 0);
background-size: 43px 100%;

(记得100%的位置要换一下昂~)

2. 或者是：

background: linear-gradient(to right ,pink 33%, yellow 0, yellow 66%, blue 0);
background-size: 43px 100%;

Paste_Image.png

那如果是-90deg呢？

background: linear-gradient(-90deg (== to left),pink 33%, yellow 0, yellow 66%, blue 0);
background-size: 43px 100%;

Paste_Image.png

就会以相反的顺序来重复绘制了，OMeffingG！（因为正值会逆时针旋转，而负值会顺时针旋转！）

---

-----------------------------------华丽丽再分割一下-----------------------------------

如果宝宝们想要得到斜条纹呢？

娃娃把yellow弄一半，blue弄一半，转个45deg看一下：

background: linear-gradient(45deg ,yellow,yellow 50%, blue 0);
background-size: 40px 40px;

Paste_Image.png

wow~ It seems a little weird, and it's not what we want.
因为这里只是把每个40px*40px转了45deg，而不是整个div...
仔细想想好像yellow和blue各站一半是不行的，但这样子就可以了

Paste_Image.png

background: linear-gradient(45deg ,yellow,yellow 25%, blue 0, blue 50%, yellow 0, yellow 75%, blue 0);
background-size: 40px 40px;

Paste_Image.png

Ding~ 效果出现了呢！ But! Pay attention to my "But" !
宝宝们千万不要很傻很天真滴认为换成60deg的话方法也是可行的！

Paste_Image.png

呵呵哒~。。。。。。
However！

Lea姐姐告诉我们，其实完全不用这么麻烦的好嘛！有个repeating-background-gradient简直是一大神器啊！

而且根本不需要设置background-size啊！它自己就会无限重复直至填满整个div啊！

background: repeating-linear-gradient(60deg,yellow, yellow 10%, blue 0, blue 20%);

Paste_Image.png

简直完美！

---

当然了，有些时候宝宝们并不需要用两个不一样的颜色来填充条纹，而是一深一浅啊，一明一暗啊酱紫。。。
这种时候吧，可以采用下面的方法：
铺上一层background-color作为主色调，用hsla()来调整辅色调，
然后用transparent 0来透出background-color 就可以啦：

background-color: #343348;
background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%, .2), hsla(0,10%,100%, .2) 10px, transparent 0, transparent 30px);

Paste_Image.png

美美哒~

---