CSS Sprites 雪碧图的使用方法

使用上图实现下面的效果

代码如下：

<!--雪碧图-->
<template>
  <div>
    <ul class="Sprites">
      <li><span class="a1"></span>编辑</li>
      <li><span class="a2"></span>分享</li>
      <li><span class="a3"></span>编辑1</li>
      <li><span class="a4"></span>分享1</li>
      <li><span class="a5"></span>编辑2</li>
    </ul>
  </div>
</template>
<style scoped>
ul.Sprites {
  margin: 0 auto;
  border: 1px solid #409eff;
  width: 300px;
  padding: 10px;
}
ul.Sprites li {
  height: 40px;
  font-size: 14px;
  line-height: 40px;
  text-align: left;
  overflow: hidden;
}
ul.Sprites li span {
  float: left;
  width: 35px;
  height: 35px;
  overflow: hidden;
  background: url("../assets/sprites.png") no-repeat;
  transform: scale(0.5);
}
ul.Sprites li a {
  padding-left: 5px;
}
ul.Sprites li span.a1 {
  /* background-position: 左 上 */
  background-position: 0 0;
}
ul.Sprites li span.a2 {
  background-position: 0 -40px;
}
ul.Sprites li span.a3 {
  background-position: 0 -80px;
}
ul.Sprites li span.a4 {
  background-position: 0 -120px;
}
ul.Sprites li span.a5 {
  background-position: 0 -40px;
}
</style>