1.background-repeat
通常背景图的宽高不可能刚好和容器大小一致，（在no-repeat情况下）所以容器经常多出一些空白区域。如何处理这个空白区域就是这个属性的使命
他有几个值：
repeat：（默认）平铺直至塞满整个容器，结果通常就是容器边缘只显示半张图片（空间不够）
repeat-x：只在水平方向平铺
repeat-y：只在垂直方向平铺
no-repeat：不重复，只显示一张图片
round：图片经过一系列的平铺之后，再通过伸缩的方式“消化”掉剩余的空白区域，保证每张图片的完整型
space：图片经过一系列的平铺之后，把剩下的空白区域均分成间隔，把每张图片隔开，保证每张图片的完整型
如图，容器大小为600 * 420，一张背景图的大小为144 * 197。横向放4张填不满，5张放不下。纵向2张填不满，3张放不下.
如果设置为round，则横向放4张，这4张图片横向等比放大刚好填满容器的宽度，纵向也是如此（也有可能是缩小适应宽度）
如果设为space，则横向放4张，剩余空间均分成间隔，把每张图片隔开
2.background-size
这个属性设置单张背景图的大小，默认是原图的大小。他的值有以下几种：
具体数值 例如50px （注意宽高比，避免图像失真）
百分比 例如50% （这个比例是基本容器本身，而不是原图大小）
contain 缩放背景图，使之适应容器大小（不改变宽高比），图片适应容器的最大边
cover 缩放背景图，使之适应容器大小（不改变宽高比），图片适应容器的最小边
contain/cover都会将单张背景图缩放来适应容器，区别在于contain会尽可能的显示一张完整的图片，容器多余的部分则交给background-repeat属性处理。,而cover会用一张图片覆盖整个容器，宁愿图片有一部分显示不出来，也会填满整个容器
contain效果
cover效果
3.background-origin
这个属性用来设置背景图片的绘制原点，它有3个值：
border-box 从边框开始绘制
padding-box 从padding开始绘制（默认）
content-box 从content开始绘制
要看效果，最好设置background-repeat: no-repeat
默认效果：即padding-box
border-box效果
content-box效果
4.background-clip 设定背景图的显示区域
默认情况下，元素的border，padding，centent区域都是可以显示背景图的，css3添加了这个属性，可以设定背景图的显示区域
这个属性有3个值：
border-box 容器所有区域都可以显示背景图（默认）
padding-box 只在padding + content区域的显示背景图
content-box 只在content区域显示背景图
注意：这个属性对于background-color也是有效的！
默认效果：border-box
padding-box效果：
content-box效果
与其他属性的关系：
background-origin默认从padding区域开始绘制背景图，如果背景不平铺的话，那么容器左边和上边的边框区域就显示不了背景图，因为背景图平铺是往右和往下走。
5.background-position 背景图片的位置
默认背景图的位置是左上角，这个属性允许用户设置水平方向和垂直方向的偏移量，从而控制背景图片的位置。
偏移量可选值有：
具体数值：10px 20px 代表向右移动10px，向下移动20px
百分比 40% 40% （这里的百分比是基于空白的区域的大小，而不是整个容器的大小）
关键字 left / right / center / top / bottom
left / top就是0%
center就是50%
right / bottom就是100%
背景图偏移是基于默认位置进行偏移，而背景图的默认位置是由background-origin决定的（我们都知道默认位置是左上角，但是这是不准确的描述）具体可以看background-origin的说明，这里不在赘述。
6.background-attachment 背景固定
这个属性适用于容器出现滚动条的时候，它控制当用户拖动滚动条时，背景图如何展示。
scroll 系统的滚动条（body的滚动条）滚动时，背景图跟随滚动，默认
fixed 系统的滚动条（body的滚动条）滚动时，背景图像固定不动
local 元素的滚动条滚动时，背景图跟随滚动
注意：很多人都有一个误解，以为background-attachment=scroll就是背景图片随滚动条的滚动而滚动，但是这里说的滚动条是body元素的滚动条，而div元素的滚动条滚动时，div元素的背景图是不会跟着滚动的，所里这个值放在body元素上面是没问题的，放到div这种元素上面就有了其他含义
div这种元素不能使用fixed，fixed只能用于body
local只适用于div这种元素，它表明元素的背景图随着元素的滚动条滚动而滚动
通俗的说，对于body标签：scroll => 背景图随着滚动，fixed => 背景图像固定不动
对于其他标签（body子元素） scroll => 元素滚动条滚动时背景图像固定不动，local => 元素背景图随着元素的滚动条滚动而滚动
7.简写
background可以将多个背景属性写在一起，但是多个属性要写到一起有2个问题：
(1)属性书写的顺序问题
(2)某些属性值有歧义，例如background-size和background-position的值都是类似的，例如50% 50%。还有background-clip和background-origin。
对于问题一：网上的说法这个属性书写顺序一般是:bg-color bg-image repeat，即属性的书写是有顺序的。但是我个人的测试表明，属性的顺序可以随意，下面的代码也是可以正常执行的
background: content-box repeat url(timg.jpg) lightgreen 50% 50%;
对于问题二:
(1)background-origin和background-clip:如果只写了一个属性值，则视为background-origin和background-clip都是这个值。如果写了2个值，则第一个值对应background-origin，第二个值对应background-clip
padding: 20px;
border: 10px solid rgba(255, 0, 0, 0.3);
background: content-box repeat url(xbx.jpg);
//相当于
background-origin:content-box;
background-clip:content-box;
background: content-box border-box repeat url(xbx.jpg);
//相当于
background-origin:content-box;
background-clip:border-box;
(2)background-position和background-size
在background中只能写一个类似50% 50%（100px 100px）的属性值，写了之后视为background-position，如果写2个会出错
background: 50% 50% no-repeat url(xbx.jpg);
//相当于
background-position:50% 50%;
下面的写法会出错（换句话说，background-size要单独设置）
background: 20px 20px 100% 100% no-repeat url(xbx.jpg);