CSS背景属性汇总
background-color
说明：该属性为元素设置背景色，填充区域包括内容区，内边距，边框。默认值transparent表示透明，属性值可以是颜色名字（如red），可以是十六进制表示（如#ff0000），可以用RGB表示如（rgb(255, 0, 0)）,可以是关键字inherit继承父元素的背景色。
background-attachment
body {
background-image: url('a.jpg');
background-attachment: fixed;
}
说明：该属性规定背景图片是否随着页面滚动。默认值scroll表示背景图会随着页面滚动，fixed表示不随页面的滚动而滚动，inherit表示继承父元素的值。
background-image
body {
background-image: url('a.jpg');
}
说明：定义元素的背景图，背景图的大小占据元素的内容区，内边距和边框。图片默认从左上角开始，如果图片太小就会自动在水平和垂直方向上平铺，直到占据整个元素的区域。none是默认值，url指定图像路径，inherit继承父元素的值。
background-position
说明：定义背景图片的起始位置。属性值可以是以下关键字：top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
关键字的第一个值表示背景图在垂直方向上的位置，第二个值表示背景图在水平方向上的位置，第二个值默认是center。
属性值可以用百分比表示，例如background-position: 50% 30%;第一个表示水平方向上的距离（图片左上角距离左边的距离），第二个肯定是垂直方向上的距离（图片左上角距离顶部的距离），切记它和使用关键字所代表的意思是相反的。0% 0%相当于关键字top left, 50% 50%相当于center, 100% 100%相当于bottom right。百分比是依据图像在容器中的空白距离划分的，值不仅可以为正值，当值为负数时图片相当于向上和向左移动的距离。
属性值当然也可是像素，例如background-position: 50px 30px;具体含义同百分比相同，只是采用了绝对距离。
我用下面这个图片实现了一个精灵图，它的主要原理就是背景图片定位：
例5就是最终的效果
background-repeat
body {
background-image: url('a.jpg');
background-position: no-repeat;
}
说明：背景图像的平铺模式。repeat是默认值，即图像会在水平和垂直方向上平铺。repeat-x图像只在水平方向上屏幕。repeat-y图像只在垂直方向上平铺。no-repeat图像不进行平铺，最常用的一个值。inherit继承父元素的值。
background-clip
说明：规定背景绘制的区域。无论是背景色还是背景图片上面已介绍过，背景区域包括内容区，内边距，边框；该属性可以改变背景区域，默认值border-box表示背景区域包括内容区，内边距和边框。padding-box背景区包括内容区和内边距。content-box背景区域只包括内容区域。
background-origin
说明：规定background-position属性相对于什么位置定位。上面的background-position例子中可以看到，边框是没有背景图的，这是因为background-origin的默认值是padding-box，即背景图是相对于内边距来定位的，border-box表示背景图相对于边框来定位，content-box背景图相对于内容区来定位。
background-size
说明：规定背景图片的大小。默认值auto表示自身大小。属性值的单位可以是像素,例如background-size: 100px 100px，第一个值宽度，第二个是高度，当只设置一个值时，第二个值默认是auto，浏览器根据宽度自动计算出高度。单位可以是百分比，百分比是相对于父容器的宽高，第一个值设置宽度，第二个设置高度，当只有一个值时第二个值默认为auto。属性值cover表示覆盖整个容器的区域，图片太小就会等比例拉伸，太大就会把多余部分裁减掉，这就导致图像的某些部分可能无法显示在容器中。contain表示图像在容器内等比例缩放，直到宽度或者高度填满容器为止，这个值还是挺常用的。
background
说明：这是一个简写属性，它是以下属性的简写：
background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
官方没有强制要求属性顺序，但是我们通常按照上面的排序写，例如：background: #ff0000 url('a.jpg' center / 20px no-repeat)，使用简写是一个很好的习惯。
