雪碧图（精灵图）-CSDN博客

在网页中使用雪碧图的目的主要是为了优化页面性能，因为页面中每一张图片都需要提交一次HTTP请求，当图片过多的时候会使得加载量过大，然后给页面的加载造成负担，甚至出现卡顿的现象

雪碧图的应用场景：

（1）一般来说小的图标是要合成雪碧图的；

（2）一些大图片或者动态加载的图片不适合使用精灵图，

雪碧图的实现原理：

（1）需要一个设置好宽高的容器，将雪碧图作为background

（2）通过设置background-position的值来移动图片的位置

优缺点：

优点是减少http请求的次数，缓解了请求压力；缺点是小图标在高清屏上可能会失真，另外平凡定位会占用较多的CPU。

例子如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>雪碧图</title>
    </head>
    <style>
        h3,ul {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        li h3 {
            font-size: 14px;
            font-weight: 400px;
        }
        li {
            display: block;
            height: 40px;
            line-height: 45px;
            overflow: hidden;
        }
        .LOGO {
            width:160px;
            background: #f8f8f8;
        }
        li i {
            background: url(img/sprite.PNG);
            display: inline;
            width: 55px;
            height: 65px;
            float: left;
            margin: 3px 10px 0 0;
        }
        .logo-1 i{
            background-position: 0 -5px;
        }
        .logo-2 i{
            background-position: 0 -49px;
        }
        .logo-3 i{
            background-position: 0 -92px;
        }
        .logo-4 i{
            background-position: -75px -3px;
        }
        .logo-5 i{
            background-position: -75px -50px;
        }
        .logo-6 i{
            background-position: -74px -142px;
        }
        .logo-7 i{
            background-position: -78px -185px;
        }
        .logo-8 i{
            background-position: -77px -230px;
        }
     
    </style>
    <body>
        <div class="LOGO">
            <ul>
                <li class="logo-1">
                    <i></i>
                    <h3>服装内衣</h3>
                </li>
                <li class="logo-2">
                    <i></i>
                    <h3>鞋包配饰</h3>
                </li>
                <li class="logo-3">
                    <i></i>
                    <h3>运动户外</h3>
                </li>
                <li class="logo-4">
                    <i></i>
                    <h3>居家饰品</h3>
                </li>
                <li class="logo-5">
                    <i></i>
                    <h3>居家家具</h3>
                </li>
                <li class="logo-6">
                    <i></i>
                    <h3>爱上喝水</h3>
                </li>
                <li class="logo-7">
                    <i></i>
                    <h3>私家车</h3>
                </li>
                <li class="logo-8">
                    <i></i>
                    <h3>乐器类</h3>
                </li>
            </ul>
        </div>
    </body>
</html>