css sprite案例

<nav>
  <ul>
    <li><a href="#" class="icon home"></a></li>
    <li><a href="#" class="icon search"></a></li>
    <li><a href="#" class="icon settings"></a></li>
    <li><a href="#" class="icon user"></a></li>
  </ul>
</nav>

.icon {
  display: inline-block;
  background-image: url('sprite.png');
  background-repeat: no-repeat;
}

.icon.home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

.icon.search {
  width: 32px;
  height: 32px;
  background-position: -32px 0;
}

.icon.settings {
  width: 32px;
  height: 32px;
  background-position: -64px 0;
}

.icon.user {
  width: 32px;
  height: 32px;
  background-position: -96px 0;
}