css精灵

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>

前进时，请别遗忘了身后的脚印。