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 （不拉伸图片）
把图像图像扩展至最大尺寸，以使其宽度和高度彻底适应内容区域。