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

最新推荐文章于 2024-02-19 06:00:00 发布

洳娅

最新推荐文章于 2024-02-19 06:00:00 发布

阅读量846

点赞数 1

分类专栏：前端文章标签：性能优化

本文链接：https://blog.csdn.net/qq_39897978/article/details/103498843

版权

前端专栏收录该内容

96 篇文章 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>