background 是元素背景 ( 背景颜色 或 背景图 )
缩写属性可以在一个声明中设置所有的背景属性。可以设置的属性有八个, 分别是：
background-color、background-image、background-size、background-repeat、
background-position、background-origin、background-clip 和 background-attachment
各值之间用空格分隔，不分先后顺序。可以只有其中某些值，如 background：＃f00 url（login.gif)
也可以单独设置, 下面具体看下每个属性的设置是怎样的.
1. background-color 设置一个元素的背景颜色
元素的背景颜色是元素的总大小，包括填充和边界（但不包括边距）
background-color: #f00 等同于 background: #f00;
默认值是 transparent , 可设置 十六进制颜色, RGB颜色, RGBA颜色, HSL色彩, HSLA颜色
2. background-image 设置一个元素的背景图像
元素的背景图像是元素的总大小，包括填充和边界（但不包括边距）
默认情况下，background-image 放置在元素的左上角，并重复垂直 和 水平方向
提示：设置一种可用的背景颜色，这样的话，假如背景图像不可用，可以使用背景色带代替
默认值是 none 无图像背景, 一般用法如 background-image: url ( 'bg.png' ) 等同于 background: url ( ''bg.png' )
除此之外, 还有如下几个属性/函数
(1).linear-gradient() 函数用于创建一个线性渐变的 "图像"
创建一个线性渐变，需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。
还要定义终止色 ( 终止色就是你想去平滑的过渡，并且你必须指定至少两种 )，
当然也可以指定更多的颜色去创建更复杂的渐变效果。
background-image: linear-gradient (direction, color1, color2, ...);
direction: 指定渐变的方向, 默认是垂直方向, 也可设任意角度值 ( 30deg, 90deg, 200deg )
还有 to right , to bottom righ 等一系列的值. 颜色可用 十六进制 , RGB 和 RGBA 等色值
(2).radial-gradient() 函数用径向渐变创建 "图像"。
径向渐变由中心点定义。创建径向渐变必须设置两个终止色。
background-image: radial-gradient(shape size at position, color1, ..., last-color);
shape 确定圆的类型. ellipse (默认): 指定椭圆形的径向渐变。circle ：指定圆形的径向渐变。
background-image: radial-gradient(ellipse , blue, green)
background-image: radial-gradient(circle, blue, green)
size 渐变的大小, 可选值如下
arthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
具体值 ： background-image: radial-gradient(40% at 60%, blue, green)
position 定义渐变的位置
center（默认）：设置中间为径向渐变圆心的纵坐标值。
top：设置顶部为径向渐变圆心的纵坐标值。
bottom：设置底部为径向渐变圆心的纵坐标值。
具体： background-image: radial-gradient(closest-side at 60%, blue, green)
background-image: radial-gradient(closest-side at 60% 55%, blue, green)
(3).repeating-linear-gradient() 函数用于创建重复的线性渐变 "图像"
background: repeating-linear-gradient(angle | to side-or-corner, color1, color2, ...);
angle : 定义渐变的角度方向。从 0deg 到 360deg，默认为 180deg。
side-or-corner : 指定线性渐变的起始位置。由两个关键字组成：
第一个为指定水平位置(left 或 right)，第二个为指定垂直位置（top 或bottom）。
顺序是随意的，每个关键字都是可选的。
background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%);
3. background-repeat 设置如何平铺对象的 background-image 属性
默认情况下，重复background-image的垂直和水平方向, 可选值如下
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repea tbackground-image不会重复
background-repeat: no-repeat 等同于 background: url ( ' login.png' ) no-repeat;
4. background-position 属性设置背景图像的起始位置
注意 对于 Firefox和Opera，background-attachment 必须设置为 "fixed（固定）"
可选择的关键字为 :
left top , left center , left bottom , right top , right center
right bottom , center top , center center , center bottom
如果仅指定一个关键字，其他值将会是"center"
x% y% 第一个值是水平位置，第二个值是垂直。
左上角是 0％ 0％ , 右下角是100％100％。
如果仅指定了一个值，其他值将是50％ ( 默认值为：0％ 0％ )
xpos ypos 第一个值是水平位置，第二个值是垂直。
左上角是0 , 单位可以是像素（0px 0px）或 任何其他 CSS单位。
如果仅指定了一个值，其他值将是50％。你可以混合使用％ 和 positions
5. background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动
可选值 如
scroll 背景图片随着页面的滚动而滚动，这是默认的
fixed 背景图片不会随着页面的滚动而滚动
local 背景图片会随着元素内容的滚动而滚动
background-attachment : fixed;
6. background-Origin 属性指定background-position属性应该是相对位置
background-origin: padding-box | border-box | content-box;
padding-box 背景图像填充框的相对位置
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
举个栗子:
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: left;
background-origin: content-box;
等同于 : background: url ( 'smiley.gif' ) no-repeat left content-box; (缩写属性)
7. background-size 属性指定背景图片大小
background-size: length | percentage | cover|contain;
length 设置背景图片高度 和 宽度。
第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage 将计算相对于背景定位区域的百分比。
第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
举个栗子:
background-size: 100% 110%; 即 背景图 高 100% 宽 120%;
8. background-clip 属性指定背景绘制区域
background-clip: border-box | padding-box | content-box;
border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
content-box 背景绘制在内容方框内（剪切成内容方框）。
