background

1》background:color position/size repeat origin clip attachment image

注意：如果同时设置”position”和”size”两个属性，应该用左斜杠”/”，而不是用空格把两个参数隔开

2》color:背景颜色值；可以使用#，英语，rgba来设置颜色

      background-color:#ccc;

  background-color:red;

  background-color:rgba(255,255,0,0.8);

3》position：背景图片的定位（如果没有图片属性不起作用）

可选值：两个参数，水平位置和垂直位置，如果只有一个值，第二个值默认为”center”；

可以使用位置关键字，百分比（以元素大小为基值），像素值

百分比计算：

x：（容器的宽度-背景图片的宽度）*x百分比，超出部分隐藏

y：（容器的高度-背景图片的高度）*y百分比，超出部分隐藏

     background-position:left;

 background-position:10%;

 background-position:100px;

4》size：图片尺寸。应用于图片（IE9+）

可选值：两个数值，如果只有一个值，第二个值为auto

默认是图片自身大小

可以使用像素，百分比（以元素大小为基础）

百分比：是根据相对的背景区域来做调整的

cover:等比例缩放图片，覆盖这个元素”，铺满整个显示区域，如果显示比例和显示区域的比例相差很大某些部分不会显示，如果图片很小会放大到没有空白，其中一边就不会显示，类似于windows中桌面背景”填充

contain:等比例缩放图片，适应元素的宽或者高，他是按照某一边来覆盖显示区域的，会有白位，类似于windows中桌面背景”适应”1

5》repeat：平铺方式

repeat:完全平铺（默认）

repeat-x:水平平铺

repeat-y:垂直平铺

no-repeat:不平铺

inherit：属性的设置从父元素继承

6》origin：背景的参考区域（IE7默认是从border开始显示背景），只能控制背景图片

可选值：

border-box：决定background-position起始位置从border的外边缘开始显示背景图片

padding-box：决定background-position起始位置从padding的外边缘开始显示背景图片，默认值

content-box：决定background-position起始位置从contain的外边缘开始显示背景图片

7》clip：背景的可视区域（可以让背景图片和背景颜色统一在相同位置上，谷歌：可以设置padding-box，content-box，火狐比较复杂)

可选值：

border-box：背景从border区域向外裁剪，也就是将超出部分裁剪，默认值

padding-box：背景从padding区域向外裁剪，也就是将超出padding区域的背景裁剪

content-box：背景从content区域向外裁剪，也就是将超出content区域的背景裁剪

background-color位置是从border左上角到右下角，background-image位置是从padding左上到border右下角

8》attachment：设置背景图片是否固定或随着页面的其余部分滚动

默认值是：scroll

fixed背景图片是固定的

9》多背景的设置

使用“，”隔开，继续写背景属性