【web前端性能优化】12.css sprite(图片精灵)-雪碧图实现原理

阳光穿透心脏的1/2处 2022-06-06 04:58 214阅读 0赞

CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。

举个应用的实例：![Center][]这是淘宝网的分类导航实例，每个目录的前面都会有一个图标，实现这个图标的方法有两种，一种是直接使用image标签，对每个需要图标的地方都设置一个image标签，这种方法的缺点是需要很多的请求来获取图片，因为每一个image都是请求回来的，如果少量的图标的还好，如果很多的话体验会受到影响。另一种的就是利用css雪碧图的形式来制作，把所有图标都放到一个图片上，请求的时候只请求这个图片，在需要显示图标的地方开一个小小的口（显示图标的范围），通过对背景图片的background-position来进行定位，最后把需要的图标刚好对准这个口就好了。

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

优点：

（1）减少加载网页图片时对服务器的请求次数

可以合并多数背景图片和小图标，方便在任何位置使用，这样不同位置的请求只需要调用一个图片，从而减少对服务器的请求次数，降低服务器压力，同时提高了页面的加载速度，节约服务器的流量。

（2）提高页面的加载速度

sprite技术的其中一个好处是图片的加载时间（在有许多sprite时，单张图片的加载时间）。由所需图片拼成的一张GIF图片的尺寸会明显小于所有图片拼合前的大小。单张的GIF只有相关的一个色表，而单独分割的每一张GIF都有自己的一个色表，这就增加了总体的大小。因此，单独的一张JPEG或者PNG sprite在大小上非常可能比把一张图片分成多张得来的图片总尺寸小。

应用实例：

<!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>

[Center]: /images/20220606/5dae1e5a8212484386c974a48c7082eb.png