CSS Sprites（精灵图）

切图仔

发布于 2022-09-08 15:25:07

9590

发布于 2022-09-08 15:25:07

文章被收录于专栏：生如夏花绚烂

引入

当用户访问网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而一个网页中往往会有很多小背景图片作为修饰，当网页背景图像过多时，服务器就会频繁的接收发送请求，这会大大降低页面的加载速度，为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，就出现了css精灵技术（CSS Sprites）

CSS精灵并不是很高深的技术，CSS精灵是一种处理网页背景图像的方式，它将一个页面涉及到的所有背景图像都集中到一张大图中，然后当客户端请求服务器时，直接将这个大图发送给客户端，这样当用户访问该页面时，只需向服务器发送一次请求，网页中的背景图像即可全部显示出来，通常情况这个由很多小背景图像合成的大图被称为精灵图。

使用精灵图

通过定义我们知道，css精灵其实就是将网页中的一些背景图像整合到一张大图中，我们需使用精灵图里面的某个小图片就需要通过css的background-image(引入精灵图)，background-repeat(指定不重复)， background-position(确定小图在精灵图中的位置，必须精确定位) 接下来看一下一些大型网页是否使用了精灵图如淘宝页面

通过审查元素，查看右边小图标是否使用了精灵图。点击游戏

查看Style

我们发现”游戏“盒子使用了background-position的属性，我们都知道这个属性是设置背景图的位置的，他使用的是哪个背景图呢？在观察html代码，发现他还有一个tbh-icon的类，通过Style我们可以看到tbh-icon引入了一张背景图片，打开背景图片链接

如下，一张图片包含了很多个小背景图，这便是【精灵图】

很多大型网页都使用了这种技术，所以我们还是有学习的必要根据淘宝的精灵图我们试着来使用一下

假设我们要使用“飞猪”图片，上面提到我们要使用精灵图的小背景图就需要通过background-postion设置精确位置，以“飞猪为例”。 1.将精灵图用ps打开

为了避免改变精灵图的位置，我们第一次打开时需将图层锁定通过选取工具，选取我们需要的图片得到其大小位置信息，图片的信息在“窗口”---“信息”。将鼠标置于选取图片的左上角

如图得到图片的大小及位置信息在html文件中

```php
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        div{
            background: url(icon.png) no-repeat;
            //引入精灵图
        }
        div:first-child{
            width:49px;
            height:49px;
            background-position: 0 -176px;
            
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

效果图