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.總結：
訣竅在於，背景圖片縮小固定的比例，背景圖片的位移量也縮小相應的比例。

Css Sprite 圖片等比縮放圖片大小