Css Sprite 图片等比缩放图片大小

图片大小80*40，即每张图片大小40*40，如何以20*20显示图片？
1. 首先看下如何以40*40显示第二张图片：

正常显示css代码
.sprite {
background-image: url(spritesheet.png);
background-repeat: no-repeat;
display: block;
}
.sprite-circle {
width: 40px;
height: 40px;
background-position: -40px 0;
}
正常显示html代码
<i class="sprite sprite-circle"></i>

---

2. 接下来以20*20显示第一张图片：

等比例显示css代码
.sprite {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: block;
    background-size: 40px auto;  //背景图片的宽度缩减到一半，高度自适应
}
.sprite-circle {     //图片大小缩小到一半
    width: 20px;
    height: 20px;
    background-position: -20px 0;   //背景图片的位置也相应的缩减到一半
}

等比例显示html代码
<i class="sprite sprite-circle"></i>

3.总结：
诀窍在于，背景图片缩小固定的比例，背景图片的偏移量也缩小相应的比例。

转载于:https://www.cnblogs.com/lpy001/p/5954264.html