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.总结:
诀窍在于,背景图片缩小固定的比例,背景图片的偏移量也缩小相应的比例。
一直走下去,不容易