background背景相关属性，repeat及attachment，CSS-Sprite图片整合

1.background-image属性

使用background-image来设置背景图片， 语法：background-image:url(相对路径);

如果背景图片大于元素，默认会显示图片的左上角， 如果背景图片和元素一样大，则会将背景图片全部显示，如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素。可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将会作为背景图片的底色，一般情况下设置背景图片时都会同时指定一个背景颜色。

2.background-repeat 属性

            * background-repeat用于设置背景图片的重复方式

                 *     可选值：

                 *         repeat，默认值，背景图片会双方向重复（平铺）

                 *         no-repeat ，背景图片不会重复，有多大就显示多大

                 *         repeat-x， 背景图片沿水平方向重复

                 *         repeat-y，背景图片沿垂直方向重复

背景图片默认是贴着元素的左上角显示， 通过background-position可以调整背景图片在元素中的位置

可选值：   该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置

                 *             top left 左上

                 *             bottom right 右下

 如果只给出一个值，则第二个值默认是center，也可以直接指定两个偏移量，  第一个值是水平偏移量

                 *                 - 如果指定的是一个正值，则图片会向右移动指定的像素

                 *                 - 如果指定的是一个负值，则图片会向左移动指定的像素

                 *             第二个是垂直偏移量    

                 *                 - 如果指定的是一个正值，则图片会向下移动指定的像素

                 *                 - 如果指定的是一个负值，则图片会向上移动指定的像素

 3.background-attachment属性

background-attachment用来设置背景图片是否随页面一起滚动

                 *         可选值：

                 *             scroll，默认值，背景图片随着窗口滚动

                 *             fixed，背景图片会固定在某一位置，不随页面滚动

                 * 

                 * 不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素

4.CSS-Sprite图片整合技术

将多个图片整合为一张图片，需要时一起加载，避免页面加载时闪动，通过background-position来切换要显示的图片的位置。

    优点：

         *         1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率

         *         2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验

举例：

.btn:link{
				/*将a转换为块元素*/
				display: block;
				/*设置宽高*/
				width: 93px;
				height: 29px;
				/*设置背景图片*/
				background-image: url(img/btn/btn2.png);
				/*设置背景图片不重复*/
				background-repeat: no-repeat;
				
			}
			
			.btn:hover{
				
				/*
				 * 当是hover状态时，希望图片可以向左移动
				 */
				background-position: -93px 0px;
			}
			
			.btn:active{
				/*
				 * 当是active状态时，希望图片再向左移动
				 */
				background-position: -186px 0px;