【前端基础】1 - 8 CSS Sprite

§1-8 CSS Sprite

目录

• §1-8 CSS Sprite
  • 1-8.1 CSS 精灵
  • 1-8.2 示例：京东服务

1-8.1 CSS 精灵

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

这样做可减少服务器被请求次数，减轻服务器压力，提高页面加载速度。

使用 CSS Sprite 的一个要点是能够精确切图，精确找到图片的位置。实际上，就是不断多次调用同一份图片文件，但每次只选取图片中的一小部分展示。通过 background-position 平移图片位置从而找到所展示的位置。

实现步骤：

1. 创建盒子，盒子尺寸与小图尺寸相同；
2. 设置盒子背景图为 Sprite 图像；
3. 添加 background-position 属性，改变背景图位置（注意为负值）；

background-position 属性值为负的原因在于，实际上在移动背景图片的位置时是在对背景图片做向左/向上平移，因而需要取值为负。

1-8.2 示例：京东服务

京东首页底部 footer 区域中的京东服务就利用了 CSS Sprite：

启动开发者工具，选中其中的图片，这些图片都是来自一张更大的图中，使用 CSS Sprite 拆分成了四张小图。