css 条纹背景

先介绍文章用到的二个知识点

 background-size 属性

语法

background-size: length|percentage|cover|contain;

css线性渐变

linear-gradient(to  <side-or-corner>)||<angle>,<color-stop>,<color-stop>)

 

<side-or-corner> = [left | right] || [top | bottom]

用角度值指定渐变的方向（或角度）。

<color-stop> = <color> [ <length> | <percentage> ]

 

顺便说下径向渐变：radial-gradient

语法
radial-gradient( [ circle || <length> ] [ at <position> ]? ,
| [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,
| [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,
| at <position> ,
<color-stop> [ , <color-stop> ]+ )

值

<position>

<position>与background-position或者transform-origin类似。如缺省，默认为中心点。

<shape>

渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。

<size>

渐变的尺寸大小。包含的值见下表尺寸常数表。

<color-stop>

表示某个确定位置的固定色值，包含一个<color>值加上可选的位置值（相对虚拟渐变射线的<percentage>或者<length>长度值）。 百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。

<extent-keyword>

关键字用于描述边缘轮廓的具体位置。以下为关键字常量：

常量	描述
closest-side	渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
closest-corner	渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
farthest-side	与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
farthest-corner	渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

 

background: linear-gradient(to top,red ,blue );

我们再改下代码：

background: linear-gradient(to top,red 50% ,blue 50%);
background-:

效果图变为：

再改写：

background: linear-gradient(to top,red 50% ,blue 50%);
             background-size:100% 30px ;

水平条纹出现

将颜色后面的百分比即色标所在的位置重合，形成了水平条纹效果。

 

 

假如写超过二种颜色也是可以的：

background: linear-gradient(to top,red 33.3% ,blue 0%,blue 66.7%,pink 0);
            background-size:100% 90px ;

垂直条纹

原来同水平条纹，只需改下background-size和linear=gradient渐变方向

background: linear-gradient(to right,red 33.3% ,blue 0%,blue 66.7%,pink 0);
　　　　　　　background-size:90px 100% ;

难点：斜向条纹

假如我们想得到斜向45度的条纹图案，怎么办？

 

起初我这样写：

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

效果如下：

很明显这不是我们想要的。

 

查询资料，才知道，原来是我们图案中的每个贴片内部的渐变旋转了45度。而不是把重复的背景旋转了45度。

 

解决方案：

以这样的贴片，来铺满整个背景：单个贴片包含了四条条纹：

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

效果图：

注意：background-size的值不是贴片直角三角形的宽，而是绿色小三角的斜边长度，正在的宽度是它的高。

 

 

更好的斜向条纹

假如，需要60度的怎么办？或者10度的？

解决方案：使用linear-gradient()的加强版repeating-linear-gradient()

 

二者工作方式差不多，只是有一点不同：色标是无限循环重复的。直达铺满整个背景。

好处之一就是不需要background-size，直接在渐变色标中指定长度。

 

 background: repeating-linear-gradient(10deg,green ,yellow 45px);
                 
               

 

上面的效果图也可以由重复渐变完成：

 background: repeating-linear-gradient(45deg,green ,green 22px,yellow 22px,yellow 45px);

 

重复条纹的好处就是随意改改角度就好了，不过实现水平和垂直条纹，用linear-gradient。斜向条纹用repeating-linear-gradient。

在处理45度时候，可以把二者结合。

 

同色系条纹

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

 

 

网格

我们甚至可以把多个渐变组合起来，列如，我们可以把水平渐变和垂直渐变条纹叠加起来，会形成如下的桌布图案。

　　　　 background: white;

　　　 　background-image: linear-gradient(90deg, rgba(200,0,0,0.5) 50%,transparent 0),
　　　　　　　　　　　　　　　linear-gradient(rgba(200,0,0,0.5) 50%,transparent 0);

　　　 　background-size: 30px 30px;
          

效果图：

 

此外，如果我们希望，网格中的格子可以调整，而网格线条的粗细保持固定，则色标的值为固定长度而不是百分比：

background: #58a;

background-image: linear-gradient(90deg,white 1px,transparent 0),
                　linear-gradient(white 1px,transparent 0);

background-size: 30px 30px;

效果图;

 

波点图形：

background：#655；
background-image: radial-gradient(tan 30%,transparent 0),
                  radial-gradient(tan 30% ,transparent 0);
        
                background-position: 0 0,15px 15px ;//第二层背景的偏移定位置必须是贴片宽高的一半

                background-size: 30px 30px;

 

效果图：