有些精灵图会设计成二倍图,二倍图在引入时需要缩小尺寸,即缩小到宽高的一半。我们可以使用 background-size 来设置宽高,宽高设置一个即可,因为宽高是等比例缩放的。
例如:
这张精灵图是 288*48px 的二倍图,只需缩放宽度一半或者高度的一半即可,然后利用 background-position 来更改坐标位置。
background: url(../img/channel-sprite.png) no-repeat 0 0;
background-size: 144px;