CSS精灵图(sprite)

wshwsh_

于 2023-07-26 21:50:45 发布

阅读量3.7k

点赞数 3

文章标签： css 前端学习方法

本文链接：https://blog.csdn.net/wshwsh_/article/details/131948285

版权

精灵图(雪碧图)

一、什么是精灵图？

精灵图，也称雪碧图(sprite)，基本原理就是将页面中使用到的各种图片进行分类，整齐划一的摆在一张背景透明的图片上面，通过 CSS 的背景技术实现图片的引入，从而减少服务器发送和接收请求的次数，提高页面的加载速度。

示例图片：

在这里插入图片描述

我们把网页中一些背景图片整合到一张大的图片文件中，然后再用background-position 精确的定位出背景图片的位置。

二、精灵图的好处

使用图像精灵将减少服务器请求的数量并节约带宽。
在一定程度上加快了页面的加载速度，也一定程度上缓解了服务器的压力。
使用精灵图可以有效减少服务器接收和发送请求的次数，从而提高页面的加载性

三、精灵图使用案例

我们使用以下单幅图像（“navsprites.gif”）而不是使用多幅单独的图像来实现简单的导航效果

在这里插入图片描述

通过使用 CSS，我们可以仅显示所需图像的某个部分。

第一步、设置容器

首先，我们要设置三个超链接标签a，然后将a标签变为行内块标签，这样就可以给a标签设置宽度和高度。

注意：设置宽度和高度是根据精灵图中的小图片的大小进行设置

我们可以通过很多种方法给精灵图中的小图片测量大小。

例如：ps工具截图软件等等

在这里插入图片描述

我通过测量工具测出的宽度为88px，但是由于我的电脑有200%的缩放(测量时注意自己电脑有没有缩放)，所以真实宽度为44px，同样步骤测出的高度也为44px，所以a标签的宽高就可以设置为44px。

在这里插入图片描述

实行代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图</title>
    <style>
        a {
            /* 将a标签变为行内块标签 */
            display: inline-block;
            width: 44px;
            height: 44px;
            /* 方便观察。增加一个边框 */
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <a class="previous" href=""></a>
    <a class="home" href=""></a>
    <a class="next" href=""></a>
</body>

</html>

效果图：

在这里插入图片描述

第二步、插入精灵图

我们使用background-image 属性将精灵图当作背景图片插入 a标签中

实行代码：

        a {
            /* 将a标签变为行内块标签 */
            display: inline-block;
            width: 44px;
            height: 44px;
            /* 方便观察。增加一个边框 */
            border: 1px solid black;
            /* 插入精灵图 */
            background-image: url('./image/navsprites_hover.gif');
        }

效果图：

在这里插入图片描述

三个方框内都出现房子图像是因为，插入背景图像默认都是从左上角开始，而我们设置的宽高正好是一个房子图像那么大。

第三步、定位（关键点）

插入精灵图之后，我们就可以通过background-position属性进行定位来寻找我们需要的小图片。

首先，在进行定位时，我们只要找到目标图片的坐标点就可以了。那么要怎么寻找目标图片的坐标点就成为了关键问题。

我们可以把精灵图的横向当作x轴，纵向当作y轴，左上角当作原点（0,0）

在这里插入图片描述

如果我们想要找第二个小图片，那么我们只需要寻找第二个小图片的左上角距离原点（0,0）的x轴距离和y轴距离即可。

在这里插入图片描述

从图中我们可以看到第二个图片的左上角(我设为了p1)p1距离原点x轴有44px的距离，距离原点y轴有0px的距离，

那么p1的坐标点为（44,0）,但是要注意图片与图片之间还有1px的边框，我们要想找到p1,就需要p1向左移动

45px，所以最后定位的结果为background-position: -45px 0;

千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。

由于原点是不动的，我们想要让第二个图像显示出来，p1就需要向左移动45px,因此，精灵图定位的值一般都为负值。

知道第二个图片如何定位，剩下的图片根据这种方法就很容易找到图片左上角的位置了。

通过这种方法我们就可以找到其余图片的左上角的坐标点：

在这里插入图片描述

实行代码：

        .previous {
            /* '上一个'左上角坐标为(90,0) */
            background-position: -90px 0;
        }

        .home {
            /* '房子'左上角坐标为(0,0) */
            background-position: 0 0;
        }

        .next {
            /* '下一个'左上角坐标为(45,0) */
            background-position: -45px 0;
        }

效果图：

在这里插入图片描述

此时我们还可以给a标签加上hover效果

实行代码：

        .previous:hover {
            background-position: -90px -45px;
        }

        .home:hover {
            background-position: 0 -45px;
        }

        .next:hover {
            background-position: -45px -45px;
        }

效果图：

在这里插入图片描述

最终代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图</title>
    <style>
        a {
            /* 将a标签变为行内块标签 */
            display: inline-block;
            width: 44px;
            height: 44px;
            /* 插入精灵图 */
            background-image: url('./image/navsprites_hover.gif');
        }

        .previous {
            /* '上一个'左上角坐标为(90,0) */
            background-position: -90px 0;
        }

        .home {
            /* '房子'左上角坐标为(0,0) */
            background-position: 0 0;
        }

        .next {
            /* '下一个'左上角坐标为(45,0) */
            background-position: -45px 0;
        }

        .previous:hover {
            background-position: -90px -45px;
        }

        .home:hover {
            background-position: 0 -45px;
        }

        .next:hover {
            background-position: -45px -45px;
        }
    </style>
</head>

<body>
    <a class="previous" href=""></a>
    <a class="home" href=""></a>
    <a class="next" href=""></a>
</body>

</html>