先介绍文章用到的二个知识点
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>
与background-position
或者transform-origin
类似。如缺省,默认为中心点。 - 渐变的形状。圆形(渐变的形状是一个半径不变的正圆)或椭圆形(轴对称椭圆)。默认值为椭圆。
- 渐变的尺寸大小。包含的值见下表尺寸常数表。
-
表示某个确定位置的固定色值,包含一个
<color>
值加上可选的位置值(相对虚拟渐变射线的<percentage>
或者<length>
长度值)。 百分比值0%
,或者长度值0
,表示渐变中心点;百分比值100%
表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。 - 关键字用于描述边缘轮廓的具体位置。以下为关键字常量:
-
常量 描述 closest-side
渐变的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)。 closest-corner
渐变的边缘形状与容器距离渐变中心点最近的一个角相交。 farthest-side
与closest-side相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)。 farthest-corner
渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
<position>
<shape>
<size>
<color-stop>
<extent-keyword>
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;
效果图: