前端教程：CSS精灵图有什么作用？怎样添加精灵图？

最新推荐文章于 2024-07-15 21:24:13 发布

传智教育

最新推荐文章于 2024-07-15 21:24:13 发布

阅读量191

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/cz_00001/article/details/130646429

版权

CSS 精灵，也叫 CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再用background-position 精确的定位出背景图片的位置。

精灵图的作用是减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。
精灵图提高页面加载速率

实现步骤：

创建盒子，盒子尺寸与小图尺寸相同
设置盒子背景图为精灵图
添加 background-position 属性，改变背景图位置，使用 PxCook 测量小图片左上角坐标，取负数坐标为 background-position 属性值(向左上移动图片位置)。

案例：京东服务

下面我们以京东服务的图标为例。

1683183593944_京东服务.png

添加上图中的精灵图，需要的代码如下：

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  li {
    list-style: none;
  }

  .service {
    margin: 100px auto;
    width: 1190px;
    height: 42px;
    /* background-color: pink; */
  }

  .service ul {
    display: flex;
  }

  .service li {
    display: flex;
    padding-left: 40px;
    width: 297px;
    height: 42px;
    /* background-color: skyblue; */
  }

  .service li h5 {
    margin-right: 10px;
    width: 36px;
    height: 42px;
    /* background-color: pink; */
    background: url(./images/sprite.png) 0 -192px;
  }

  .service li:nth-child(2) h5 {
    background-position: -41px -192px;
  }

  .service li:nth-child(3) h5 {
    background-position: -82px -192px;
  }

  .service li:nth-child(4) h5 {
    background-position: -123px -192px;
  }

  .service li p {
    font-size: 18px;
    color: #444;
    font-weight: 700;
    line-height: 42px;
  }
</style>