深入学习css之background属性
css中允许应用纯色作为背景，也允许使用图片作为背景。
background一共有8个对应的属性：
1、background-color：颜色值
用于设定背景的颜色
有3种定义颜色的形式，
1，颜色关键字表示法，可直接用英文单词来定义，比如red，blue，green等。
2，16进制表示法，用#000000到#ffffff区间内的16进制数来表示。
3，三原色表示法，rgb（r，g，b）,其中r,g,b分别代表红色，绿色，蓝色，取值范围为0到255.
默认值：transparent
注意：
1.当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上。
2.如果设置了 <' background-image'>，同时也建议设置<' background-color '>用于当背景图像不可见时保持与文本颜色有一定的对比度。
3.对应的脚本特性为backgroundColor。
2、background-image：url(“图片路径”);
用于设定对象的背景图片
默认值：none
注意：
如果定义了多组背景图，且背景图之间有重叠，写在前面的将会盖在写在后面的图像之上。
对应的脚本特性为backgroundImage。
3、background-repeat：
设置或检索对象的背景图像如何铺排填充。
取值：
repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺
repeat：背景图像在横向和纵向平铺
no-repeat：背景图像不平铺
round：背景图像自动缩放直到适应且填充满整个容器。（CSS3）
space：背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）
但ie览器还不支持以上两个新属性。
默认值：repeat
注意：
允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向。
如果只提供1个参数，则用于横向和纵向。特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat repeat，即其实repeat-x和repeat-y等价于提供了2个参数值
对应的脚本特性为backgroundRepeat。
4、background-position
用于设置或检索对象的背景图像位置。
取值：
<percentage>：用百分比指定背景图像填充的位置。可以为负值。其参考的尺寸为容器大小减去背景图片大小
<length>：用长度值指定背景图像填充的位置。可以为负值。
center：背景图像横向和纵向居中。
left：背景图像在横向上填充从左边开始。
right：背景图像在横向上填充从右边开始。
top：背景图像在纵向上填充从顶部开始。
bottom：背景图像在纵向上填充从底部开始
默认值：0% 0%，效果等同于left top
注意：
该属性提供2个参数值（CSS3中已允许提供3，4个值）。
如果提供三或四个，每个<percentage>或<length>偏移前都必须跟着一个边界关键字（即left | right | top | bottom，不包括center），偏移量相对关键字位置进行偏移。
示例：假设要定义背景图像在容器中右下方，并且距离右边和底部各有20px
缩写方式：
background:url(test1.jpg) no-repeat right 20px bottom 20px;
你也可以设置3个参数值：
拆分方式：
background:url(test1.jpg) no-repeat left bottom 10px;
要注意的是：设置3个或4个值，偏移量前必须有关键字。也就是说，形如："10px bottom 20px"，这样的参数设置是错误的，因为10px前面没有关键字。
如果提供两个，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）。
对应的脚本特性为backgroundPosition。
5、background-attachment：
设置或检索背景图像是随对象内容滚动还是固定的。
取值：
fixed：背景图像相对于窗体固定。
scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）
默认值：scroll
还有三个是css3中新加入的
6、background-size
检索或设置对象的背景图像的尺寸大小。
取值：
<length>：用长度值指定背景图像大小。不允许负值。
<percentage>：用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
默认值：auto
注意：
- 该属性提供2个参数值(特性值cover和contain除外)。
- 如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。
- 如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。
- 对应的脚本特性为backgroundSize。
- 不支持写入 <' background'> 缩写方式。
- iOS6.1及更早cover值在body上有bug；同时background-size: cover; background-attachment: fixed;配合时也有bug。
7、background-clip：指定对象的背景图像向外裁剪的区域。
取值：
padding-box：从padding区域（不含padding）开始向外裁剪背景。
border-box：从border区域（不含border）开始向外裁剪背景。
content-box：从content区域开始向外裁剪背景。
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。遮罩效果
默认值：border-box
注意：
- text属性值，目前为webkit only
2.对应的脚本特性为backgroundClip。
8、background-origin
取值：
padding-box：从padding区域（含padding）开始显示背景图像。
border-box：从border区域（含border）开始显示背景图像。
content-box：从content区域开始显示背景图像。
默认值：padding-box