认识精灵图 CSS Sprite

原创已于 2022-06-13 16:34:07 修改 · 145 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

于 2022-06-13 15:13:26 首次发布

CSSSprite是一种优化网页加载速度的技术，通过合并多个小图至一张大图，减少HTTP请求次数，从而加快页面响应。使用CSS背景定位显示所需图片部分，简化图片命名并降低服务器压力。在实际应用中，可以通过设置元素宽高和背景位置来实现精灵图的显示，如京东等网站已采用此技术。使用工具如SpriteCow可以帮助获取精灵图的具体位置。

认识精灵图 CSS Sprite

一、什么是CSS Sprite

是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分
有人翻译为：CSS雪碧、CSS精灵
例如：京东就使用了CSS Sprite

二、使用CSS Sprite的好处

减少网页的http请求数量，加快网页响应速度，减轻服务器压力
减小图片总大小
解决了图片命名的困扰，只需要针对一张集合的图片命名

三、精灵图的使用

精灵图的原理是通过只显示图片的很小一部分来展示的;
通常使用背景:
- 1.设置对应元素的宽度和高度
- 2.设置精灵图作为背景图片（background-image）
- 3.调整背景图片的位置来展示（background-position）
如何获取精灵图的位置
网址链接如下：
- http://www.spritecow.com/
代码：

<!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>Document</title>
  <style>
    .box {
      background-color: #000;
    }

    .topbar {
      background-image: url(./images/topbar.png);
      background-repeat: no-repeat;
      display: inline-block;
    }

    i.icon_x {
      background-position: -192px 0;
      width: 26px;
      height: 13px;
    }

    i.topbar_logo {
      background-position: 0 -19px;
      width: 157px;
      height: 33px;
    }
  </style>
</head>

<body>
  <div class="box">
    <i class="topbar icon_x"></i>
    <i class="topbar topbar_logo"></i>
  </div>
</body>

</html>