CSS精灵图（sprite）

全栈程序员站长

发布于 2022-06-28 16:25:22

8180

发布于 2022-06-28 16:25:22

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

说到精灵图（雪碧图），大家肯定和我一样觉得这个很新鲜。在学习了有关精灵图（雪碧图）的一些知识后，就来和大家讨论一下，我个人对精灵图（雪碧图）的一些理解和实现方法吧。

1、精灵图技术产生的目的：很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。

2、精灵图技术的本质：所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度，也一定程度上缓解了服务器的压力。例如王者荣耀页面里的几个小logo:

3、那么这是怎么实现将这么一张复杂的图片分别展示出来的呢，这里就得运用到了background-position。我们通过它来改变背景图片的位置，从而显示出我们想要显示出来的部分。

例如这是一张大的精灵图，我们现在用它来拼出我们想要的字母，例如ANDY

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            display: inline-block;
            background: url(images/abcd.jpg) no-repeat;
        }
        .aa{
            width: 108px;
            height: 110px;
            background-position: 0 -9px;
        }
        .nn{
            width: 112px;
            height: 110px;
            background-position: -255px -276px;
        }
        .dd{
            width: 97px;
            height: 107px;
            background-position: -363px -8px;
        }
        .yy{
            width: 110px;
            height: 110px;
            background-position: -367px -556px;
        }
    </style>
</head>
<body>
    <div class="aa"></div>
    <div class="nn"></div>
    <div class="dd"></div>
    <div class="yy"></div>
</body>
</html>

最终效果：