一、雪碧图的原理

CSS Sprites 因其英文被称为雪碧图。
主要用于把一堆小图标整合在一张背景透明的大图上，通过设置对应的位置来显示不同的图片，目的是大幅减轻服务器对图片的请求数量，是前端性能优化的一种方式。

雪碧图示例.png

主要优势

1、减少网页的HTTP请求，提高页面性能
2、减少图片命名的困扰

主要优势

1、需要计算每个图片的位置
2、后期维护困难

二、雪碧图的实现

通过设置每个<i></i>对应的background-position来展现不同位置的图标。
其中第一个参数代表x轴控制左右，第二个参数代表y轴控制上下。
默认情况下为

background-position: 0% 0%;

image.png

当设置x为负数，相当于固定展现框不动，图片向左侧移动，展现的是相对右侧的内容。同理当y为负数，图片向上侧移动，展现的是相对下方的内容。

image.png

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <title>测试页面</title>
    <style>
        .item-list {            
            border: 1px solid #333;
            padding: 0;
            width: 200px;
            background-color: #f8f8f8;
        }
        .item-list li {
            list-style: none;
            width: 160px;
            height: 40px;
            margin: 0 20px;
            border-bottom: 1px solid #dedede;
            line-height: 40px;
        }
        li i {
            background:url('http://img.mukewang.com/539a950e00015ba500710200.jpg');
            width: 30px;
            height: 24px;
            display: inline-block;
            vertical-align: middle;
        }
        .p1 i {
           background-position: -40px 0px;
        }
        .p2 i {
           background-position: 0px -24px;
        }
        .p3 i {
           background-position: 0px -48px;
        }
        .p4 i {
           background-position: 0px -72px;
        }
        .p5 i {
           background-position: -40px -72px;
        }
        .p6 i {
           background-position: -40px -48px;
        }
        .p7 i {
           background-position: 0px 0px;
        }
    </style>
</head>

<body>
    <div style="height:400px;">
        <div style="width:600px;height:100%;margin-left:300px;">
            <ul class="item-list">
                <li class="p1"><i></i>商品A</li>
                <li class="p2"><i></i>商品B</li>
                <li class="p3"><i></i>商品C</li>
                <li class="p4"><i></i>商品D</li>
                <li class="p5"><i></i>商品E</li>
                <li class="p6"><i></i>商品F</li>
                <li class="p7"><i></i>商品G</li>
            </ul>
        </div>
    </div>
    
    <script src="js/jquery.min.js"></script>    
     
</body>
</html>