问题背景

在精灵图的原图中，这个标志只有11px11px，但我想放大成33px33px

讲解

修改前

// An highlighted block
  <div class="bg">
    <a href="#" class="left"></a>
    <a href="#" class="right"></a>
  </div>

// An highlighted block
    .left {
      display: block;
      width: 11px;
      height: 11px;
      position: absolute;
      background: url("images/sprites3.png") no-repeat;
      background-position: 0 -85px;
      background-size: 152px 144px;
      top: 50%;
    }

这里我们看到左a标签太小，需要缩放。
思路：
1.缩放a的width，height
2.将background-size，缩放相应的倍数
3.background-position，也放大三倍

修改后

// An highlighted block
    .left {
      display: block;
      width: 33px;
      height: 33px;
      position: absolute;
      background: url("images/sprites3.png") no-repeat;
      background-position: 0 -255px;//原本 0 -85px
      background-size: 462px 432px;//原图152*144,在这里放大三倍
      top: 50%;
    }