精灵图的使用

精灵图的使用

精灵图也叫雪碧图

为什么用精灵图

首先，我们先来了解一下，页面在接受图片的过程。

每张图片的显示是先由浏览器发送请求，然后服务器接受请求，返回请求内容。如果一个页面有上百张图片，哪怕是很小的图标，都需要经历一次这样的过程。那么，毋庸置疑，肯定会由于请求数量的增加让整个页面的加载速度降低。正应为如此，精灵图（sprite）应运而生，图片整合技术，将大量的小图标整合到一张图，从而减少服务器接收和发送请求的次数，提高页面的加载速度。

怎么使用精灵图

精灵图的实质其实就是利用背景图和背景图的位置去显示同一张图上，不同位置的图片，进而，在引入一张图的前提下，显示不同的图片的技巧。

现在如果我们想显示用户这一张图片，应该怎么办呢？

css样式介绍

background-image和background-position

• background-image：url（引入图片的路径）；可以引入多张图，用逗号隔开即可。
• background-position：x y；x和y是x轴上的偏移值，y是y轴上的偏移值

使用说明

例如这一张精灵图，我们可以分别显示用户与密码的两个图标出来

<style type="text/css">
    .user-box {
        width: 38px;
        height: 38px;
        border: 1px solid red;
        background-image: url(img/pwd-icons-new.png);
    }

    .password-box {
        width: 38px;
        height: 38px;
        border: 1px solid red;
        background-image: url(img/pwd-icons-new.png);
        background-position-x: -48px;
        background-position-y: -96px;
    }
</style>
<div class="user-box">
</div>
<hr>
<div class="password-box"></div>

最终效果

其实说白了就是将精灵图设为一个大背景，然后通过background-position来移动背景图，从而显示出我们想要显示出来的部分。

精灵图虽然实现了缓解服务器压力以及用户体验等问题，但还是有一个很大的不足，那就是牵一发而动全身。这些图片的背景都是我们详细测量而得出来的，如果需要改动页面，将会是很麻烦的一项工作。