CSS精灵图

精灵图的目的：很多大型网站在首次加载的时候需要加载很多小图片，如果在同一时间，服务器又拥堵的话，就会导致页面加载慢。为了解决这一问题，就用了精灵图来解决加载时间过长影响用户体验的问题。

精灵图的本质：精灵图就是把很多小图片放在一张大图片里，所以在首次加载图片的时候，就不用加载那么多图片了，只需要加载出来那一张大图片就行了。这样就减少了页面加载的速度，也减轻了服务器的压力。

比如我们想要显示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>

精灵图的缺点：这些图片都是我们详细测量得出来的，所以如果后期需要改动的话，将会很麻烦。

CSS精灵图

相关文章