一个盒子的背景色是默认透明（transparent）的，所以父元素的背景会透过子元素。盒子的背景要么是颜色，要么是图片，图片可以有多张。
background-image
可定义一张图片或多张图片，每一张图片都可以被独立控制尺寸、定位等。如何独立控制呢，那就是一一对应，其他控制背景的属性，比如background-clip、background-position，它们的值可以是用逗号分开的多个值，和background-image定义的图片一一对应，对应谁，就控制哪张图片，其中还讲究一个原则即属性值个数多于图片数，就忽略多的属性值，少了，就把前面的值循环出现一遍。
background-image的值还可以是none，它仍然会占一个图层
.myDiv {
background-image: url("1.png"), url("2.png");
background-clip: border-box, padding-box;
}
background-color
定义盒子的背景色，它会被放在所有背景图片(background-image)的最后面，背景色也可以被裁剪，通常使用background-clip即可，当同时也存在背景图片时，背景色的裁剪和最底层的那张图片的background-clip值一样。
background-repeat
定义图片平铺的方式，分两个方向，横轴和纵轴，取值有：
- repeat-x，横向重复
- repeat-y，纵向重复
- repeat，重复，超出的部分会裁剪
- space，先定首尾图片，再定中间的图片，中间能放多少放多少，空隙均等
- round，会压缩其他图片，以保证放下最后一个图片
- no-repeat，不重复
background-origin
每一张背景图片都会有它的定位区域，以此为基础，就可以使用background-position设置图片的偏移了。该属性取值有:
- border-box
- padding-box
- content-box
background-position
定义各个背景图片的初始定位位置，可用逗号隔开属性值，以此对应各个背景图片。
每一项取值分两部分，代表水平和垂直方向，水平方向上可取值left | center | right | length-percentage，垂直方向上可取值top | center | bottom | length-percentage。以下是例子
- background-position: left; // 只有一个值，则第二个值默认center
- background-position: left top
- background-position: right 10px top 10px;
- background-position: 10px top; // 第一部分就是左偏移10px，此时top后面不能再设置偏移值
- background-position: 50% top;
background-clip
用来裁剪背景图片或背景颜色，如果同时设置了背景图片和背景颜色，那么背景颜色的裁剪依据最底层的背景图片的裁剪方式。
background-size
定义各个背景图片的尺寸，分width和height。
background-attachment
定义背景图片相对谁定位
- fixed，背景图片相对视口定位，忽略该背景图的background-origin
- local，相对本元素的内容定位，内容有多长（超出包裹元素），背景图片就会填充到多长，滑动滚动条时，背景图片随着内容一起动。
- scroll，相对本元素定位，元素有多大，背景图片就填充多少空间，若能出现滚动条，则滑动滚动条背景图片不会动。
