css精灵是一种css图像合并技术，该方法是将小图像和背景图像合并到一张图上，然后利用css定位来显示需要显示的图像。优点就是减少来http请求。常用于制作一些小的装饰。
设置完背景图background-image属性之后，将background-repeat属性设置为no-repeat不重复。如果不设置background-position属性，背景图会默认与盒子左上角对齐。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } div { width: 400px; height: 400px; background: url(../../static/images/taobao.png) no-repeat; background-color: #e4b9c0; } </style> </head> <body> <div> </div> </body> </html>
background-position属性设置的是背景图相对于盒子的位置，background-position：* *; 该属性的第一个值可以描述的是上下，也可以描述的是左右。如果你某一个值没写，默认为center。
1.你可以使用描述上下左右的词来描述相对位置：
background-position: top;
background-position: left;
background-position: top center;
background-position: right top;
background-position：bottom right; 或 background-position： right bottom;
2.你可以使用具体像素值描述相对位置（此时你如果只设置了一个具体的像素值，则该具体像素值描述的是左右，上下默认为center）
background-position: x y 【如果以你所看到的屏幕来说为第四象限的话，左上角坐标（0,0），x正值表示在第一、四象限向右移动，负值表示在二、三象限向左移动。y正值在三、四象限向下移动，负值在一、二象限向上移动】：
background-position: -40px; /*只设置一个值，该值描述的是左右，上下默认为center*/
background-position: -20px -40px;
background-position：-20px -40px;
如果背景图是一张完整的图（并不是有许多个小图拼的），直接使用background-position属性+描述上下左右的词即可（对位置精确要求不那么高时可用）。
如果背景图是有许多小图拼合而成（css精灵），你只想要背景图中某一个小图片，而且你对位置的要求很高，那么可能要麻烦一些。你首先要准备一个小点的盒子，这个小盒子的宽高即为你需要的小图片的宽高（小盒子必须要有宽高），然后将背景图沉在这个小盒子里，在使用background-position属性+具体像素值去移动背景图，使你需要的小图片呈现在这个小盒子中【背景图可能很大，但是盒子很小（相当于一个小窗户一样），你移动背景图，在窗户里看到的结果也会不同。初始时背景图和小窗户左上角是对齐的】。之后就是使用定位来将这个小盒子定位在大盒子中某个地方了。
1.我们先用fireworks切出极有家的小图片
读取到这张小图片的宽高是75px; height:20px,相对于背景图的位置是x:146px; y:48px; ，要想在宽75px高20px这个小窗户里呈现极有家这张小图，要将背景图向左移动146px，上移48px.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } div { width: 300px; height: 300px; background-color: #e4b9c0; } div p{ width: 75px; height: 20px; background: url(../../static/images/taobao.png) no-repeat; background-position: -146px -48px; } </style> </head> <body> <div> <p> </p> </div> </body> </html>
使用定位将这张小图（小盒子）居中（最好的是使用子绝父相）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } div { width: 300px; height: 300px; background-color: #e4b9c0; position: relative; } div p{ width: 75px; height: 20px; background: url(../../static/images/taobao.png) no-repeat; background-position: -146px -48px; position: absolute; margin-left: 113px; /* 父盒子宽度/2-子盒子宽度/2 = 300/2-75/2 */ } </style> </head> <body> <div> <p> </p> </div> </body> </html>
