定位+精灵图时，精灵图缩放用法

问题背景

在精灵图的原图中，这个标志只有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%;
        }