CSS Sprite

How to realise CSS Sprite
为啥要使用Sprite，减少HTTP请求数量，加速内容显示，因为每请求一次，就会和服务器建立一次链接，而建立链接是需要额外的时间。

<!DOCTYPE html>

css sprite

        <style type="text/css">
            h3,ul{
            margin:0;
            padding:0;
            }
            li {
            list-style:none;
            }
            #wrap_demo{
                width:150px;
                background:#f5f5f5;
                border:1px solid #bbbbbb;
            }
            li h3{
            font-size:14px;
            font-weight:400;
            }
            li{
            display:block;
            height:30px;
            line-height:30px;
            overflow:hidden;
            border-bottom:1px solid #dddddd;
            }
            li i{

            background:url(sp.jpg);
            display:inline;
            height:24px;
            width:30px;
            float:left;
            margin:4px 10px 0 0 ;
            }
            .bg_demo1 i{
            background-position:0 0;
            }
            .bg_demo2 i{
            background-position:0 -24px;
            }
            .bg_demo3 i{
            background-position:0 -48px;
            }
            .bg_demo4 i{
            background-position:0 -72px;
            }
            .bg_demo5 i{
            background-position:0 -96px;
            }
            .bg_demo6 i{
            background-position:0 -120px;
            }
            .bg_demo7 i{
            background-position:0 -144px;
            }
            .bg_demo8 i{
            background-position:-38px 0;
            }
        </style>
    </head>
    <body>
        <div id="wrap_demo">
            <ul>
                <li class="bg_demo1">
                    <i></i>
                    <h3>Clothes</h3>
                </li>
                <li class="bg_demo2">
                    <i></i>
                    <h3>Shoes</h3>
                </li>
                <li class="bg_demo3">
                    <i ></i>
                    <h3>Sports</h3>
                </li>
                <li class="bg_demo4">
                    <i ></i>
                    <h3>Jewelry</h3>
                </li>
                <li class="bg_demo5">
                    <i ></i>
                    <h3>Camera</h3>
                </li>
                <li class="bg_demo6">
                    <i ></i>
                    <h3>Digital</h3>
                </li>
                <li class="bg_demo7">
                    <i ></i>
                    <h3>Makeup</h3>
                </li>
                <li class="bg_demo8">
                    <i></i>
                    <h3>Office</h3>
                </li>
            </ul>
        </div>        
    </body>
</html>

为什么使用sprite的时候background-position属性为负数
在使用背景图时，背景图的初始位置是从容器的左上角开始铺满整个容器，background-position：0 0 ，然后开始左移x轴，左移就代表值会为负数，同理y轴也如此