CSS笔记 - 雪碧图（精灵图）

雪碧图

• 定义和原理：将多个小图片统一保存到大图片中，然后通过调整background-position来显示响应的图片，这样就能解决因加载延迟带来的图片闪烁问题

• 使用步骤：

  1. 先确定要使用的图标
  2. 测量图标的大小
  3. 根据测量结果创建一个元素
  4. 将雪碧图设置为元素的背景图片
  5. 设置一个偏移量以显示正确的图片

  a:link{
      display : block;
      width: 93px;
      height: 29px;
      background: url("背景.png");
      background-position: 0 0;
  }
  
  a:hover{
      background-position: -93px 0;
  }
  
  a:active{
      background-position: -186px 0;
  }