(5)条纹背景:背景知识:css线性渐变,background-size;
(1.水平条纹:给背景设置一个线性渐变色,background:linear-gradient(#fb3 20%,#58a 80%);
会发现真正的渐变色其实出现在的区域仅仅在容器60%高度的区域,若将色标继续拉近,会发现真正的渐变区域更小了.
若色标重合,background:linear-gradient(#fb3 50%,#58a 50%);会看到只有两快实色而没有较明显的渐变了.
可用background-size:100% 50px;调整尺寸(宽度 高度若有多个背景可用逗号隔开,分开写)
再这个情况下可以看到水平条纹效果:background:linear-gradient(#fb3 50%,#58a 50%);background-size:100% 20px;若有创建不等宽的条纹,只需要调整色标的位置值就ok了,如;background:linear-gradient(#fb3 30%,#58a 50%);background-size:100% 20px;在这里为了改动宽度是更方便,规范中有这样的一句话:"如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小,则该色标的位置值会被设置为它前面所有色标位置值的最大值."--(css图像第三版)也就是说,假如我们把第二个色标设置为0,那么它的位置就会被浏览器调整为前一个色标的位置值.background:linear-gradient(#fb3 30%,#58a 0);
background-size:100% 20px;这个和前一个产生效果是一样的.
三种条纹的代码,以此类推:background:linear-gradient(#fb3 33.3%,#58a 0,#58a 66.6%,deepgreen 0);background-size:100% 30px;
(2.垂直条纹:垂直条纹和水平条纹类似,差别在于方向,我们只需在开头加上一个额外的参数指定渐变的方向就可以了,如下:
background:linear-gradient(to bottom,#fb3 30%,#58a 0);background-size:100% 20px;
(2.斜向条纹:在设置过了水平和垂直条纹后,那么斜向条纹的设置呢,我们会顺势想,直接改变角度就可以,然而事实并不是这样的,敲下这样的代码后,我们看到的并不是我们想要的效果,background:linear-gradient(45deg,#fb3 30%,#58a 0);background-size:100% 20px;~~图样图simply.
不可以的原因在于,我们只是把"平铺的每个单位元"旋转了而已!!!并不是把把整个背景都旋转了,为了做到无缝拼接,所以我们需要把旋转的单位元改变,即增加一些色标:
background:linear-gradient(45deg,#fb3 25%,#58a 0,#58a 50%,#fb3 0,#fb3 75%,#58a 0);
background-size:100% 20px;
或者还可以这样理解:......
