性能优化------图片合并（雪碧图）

一时失言乱红尘 2023-06-21 07:29 191阅读 0赞

### 一、原理 ###

实现原理：**CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减少你的网站的HTTP请求数量。该图片使用CSS `background`和`background-position`属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非`<img>`标签。**

### 二、具体实现 ###

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪碧图实现原理</title> </head> <style> ul,h3{ 
    
            margin: 0;
    
            padding: 0;
    
        }
    
        h3{ 
    
            display: block;
    
            margin: 0;
    
            padding: 0;
    
        }
    
        .cat{ 
    
            position: relative;
    
            width: 150px;
    
            background-color: #f8f8f8;
    
            border: 1px solid #bbb;
    
        }
    
        li{ 
    
            z-index: 2;
    
            position: relative;
    
            display: block;
    
            height: 31px;
    
            line-height: 31px;
    
            overflow: hidden;
    
            margin: 1px 10px 0;
    
            vertical-align: bottom;
    
            border-bottom: 1px solid #dedede
    
        }
    
        li:hover{ 
    
            background-color:#666666;
    
        }
    
        li h3{ 
    
            font-size: 13px;
    
            font-weight: 400;
    
        }
    
        li i{ 
    
            display: inline;
    
            float:left;
    
            margin: 3px 10px 0 0;
    
            height: 24px;
    
            width: 30px
    
        }
    
        /* 在这里补充雪碧图的样式 */
    
        li>i{ 
    
            background:url('http://img.mukewang.com/539a950e00015ba500710200.jpg');
    
        }
    
        .cat-2>i{ 
    
            background-position:0 -24px;
    
        }
    
        .cat-3>i{ 
    
            background-position:0 -48px;
    
        }
    
        .cat-4>i{ 
    
            background-position:0 -72px;
    
        }
    
        .cat-5>i{ 
    
            background-position:0 -96px;
    
        }
    
        .cat-6>i{ 
    
            background-position:0 -120px;
    
        }
    
        .cat-7>i{ 
    
            background-position:0 -144px;
    
        }
    
        .cat-8>i{ 
    
            background-position:0 -168px;
    
        }
    
    </style>
    
    <body>
    
    <div class="cat">
    
        <ul>
    
            <li class="cat-1"><i></i><h3>服装内衣</h3></li>
    
            <li class="cat-2"><i></i><h3>鞋包配饰</h3></li>
    
            <li class="cat-3"><i></i><h3>运动户外</h3></li>
    
            <li class="cat-4"><i></i><h3>珠宝手表</h3></li>
    
            <li class="cat-5"><i></i><h3>手机数码</h3></li>
    
            <li class="cat-6"><i></i><h3>家电办公</h3></li>
    
            <li class="cat-7"><i></i><h3>护肤彩妆</h3></li>
    
            <li class="cat-8"><i></i><h3>母婴用品</h3></li>
    
        </ul>
    
    </div>
    
    </body>
    
    </html>