第十五天：精灵图

CSS 精灵图（CSS Sprite）是一种网页图片优化技术，将网页中多个小图标、小背景图合并到一张大图中，通过 CSS 的background-position属性精准定位显示大图中的某一个小图标，减少网页的 HTTP 请求次数，提升页面加载速度。

把多个小图标拼接在一张透明背景的大图上，给元素设置固定宽高（等于要显示的小图标尺寸），设置大图为元素背景图，通过background-position移动背景图位置，让需要的小图标显示在元素可视区域内

/* 1. 给元素设置固定宽高 = 小图标尺寸 */
.icon {
  width: 30px;
  height: 30px;
  /* 2. 设置精灵图为背景图 */
  background-image: url(./images/sprite.png);
  /* 3. 定位背景图：x偏移量 y偏移量（核心！） */
  background-position: -60px -90px;
  /* 可选：禁止背景图平铺（默认会重复，必须关闭） */
  background-repeat: no-repeat;
}

使用精灵图的好处就是：优化加载速度，减少请求，适合固定尺寸的小图标（导航、按钮、功能图标），兼容性好，所有浏览器都支持