高级技巧之精灵图

倔强的小白菜

于 2022-06-01 16:49:42 发布

阅读量695

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端基础文章标签：服务器运维

本文链接：https://blog.youkuaiyun.com/weixin_47481102/article/details/125085585

前端基础专栏收录该内容

51 篇文章

订阅专栏

精灵图（Sprites）用于减少服务器请求次数，提高页面加载速度。它将多个小背景图片整合到一张大图中，通过调整background-position实现显示不同部分。本文介绍了精灵图的核心原理、使用方法，并提供了实践练习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.为什么需要精灵图

一个网页中往往会应用很多小的背景图像作为装饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器压力过大，这将大大降低页面的加载速度。

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了css精灵技术（也称CSS Sprites 、CSS雪碧）。

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

1.1精灵图（Sprites）的使用

1.1.1精灵图（sprites)的使用

1.1.1.1使用精灵图核心：
1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到张大图片中。
2.这个大图片也称为sprites精灵图或者雪碧图
3.移动背景图片位置，此时可以使用background-position.
4.移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同
5.因为一般情况下都是往上往左移动，所以数值是负值。
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

1.1.1.2使用精灵图核心总结：
1.精灵图主要针对于小的背景图片使用。
2.主要借助于背景位置来实现-background-position。
3.一般情况下精灵图都是负值。（千万注意网页中的坐标：轴右边走是正值，左边走是负值，y轴同理。）

2.练习

2.1精灵图的使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>精灵图（sprites）的使用</title>
    <style>
      div {
        /* 提取相同的背景图片地址 */
        background: url(images/jlt.png);
      }
      .one {
        width: 57px;
        height: 57px;
        /* 背景图片位置  参数是精确单位 */
        background-position: -183px 0;
      }

      .two {
        width: 235px;
        height: 127px;
        margin: 0 auto;
        background-position: 0 -219px;
      }
    </style>
  </head>
  <body>
    <div class="one"></div>
    <div class="two"></div>
  </body>
</html>

2.2 拼出自己的名字

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>精灵图练习：拼出自己的名字</title>
    <style>
      span {
        display: inline-block;
        /* 提取出相同的背景图片地址 */
        background: url(images/abcd.jpg);
      }

      .j1 {
        width: 114px;
        height: 114px;
        /* 背景图片位置>参数是精确单位，第一个值表示x轴坐标，第二个参数表示y轴坐标；
        设置或检索对象的背景图像位置 */
        background-position: -253px -273px;
      }

      .j2 {
        width: 112px;
        height: 112px;
        background-position: -476px -419px;
      }

      .j3 {
        width: 108px;
        height: 109px;
        background-position: 0 -9px;
      }

      .j4 {
        width: 114px;
        height: 114px;
        background-position: -253px -273px;
      }
    </style>
  </head>
  <body>
    <span class="j1"> </span>
    <span class="j2"> </span>
    <span class="j3"> </span>
    <span class="j4"> </span>
  </body>
</html>