background 线性渐变

格式：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner>] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?

取值：
下述值用来表示渐变的方向，可以使用角度或者关键字来设置：
<angle>：顺时针方向角度
用角度值指定渐变的方向（或角度）。
to left：
设置渐变为从右到左。相当于: 270deg
to right：
设置渐变从左到右。相当于: 90deg
to top：
设置渐变从下到上。相当于: 0deg
to bottom：
设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
<color-stop> 用于指定渐变的起止颜色：
<color>：
指定颜色。
<length>：
用长度值指定起止色位置。不允许负值不是指颜色的长度
<percentage>：
用百分比指定起止色位置。

两个相邻的color-stop之间的关系为：前者的起始位置与后者起始位置的差之间为两个颜色的渐变过度距离，若后者位置与前者位置交叉则起始位置为前者结束位置，则无渐变过度，形成条纹样式。
如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。

可利用background-size来设置背景图像的大小。linear-gradient生成的图像也同样适用。

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

length （20px 30px拉伸图片）
设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

percentage （100% 100% 拉伸图片）
以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。

cover （不拉伸图片）
把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain （不拉伸图片）
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。