background-size和background-position对精灵图的缩放理解

属性解析

background-size能放大/缩小精灵图大小

background-size:100px 200px;/*设置背景图大小宽100px，高200px*/

background-position能移动精灵图位置

background-position:-100px -200px;/*设置背景图向左移动100px，向上移动200px*/

例子解析

如下图所示，我们所需要的喇叭在图的坐标(234，68)处，占宽33，高27的大小

1、控制其大小

我们在页面，需要将小喇叭展示在宽16px，高13px的div中，但此时喇叭在原精灵图上占宽33px，高27px，因此需要将小喇叭缩小为原图的1/2，原精灵图大小为332x144

所以background-size:166px 72px，即将原精灵图大小整体缩小1/2

2.移动精灵图位置对其展示框

前面可以得知精灵图整体缩放了1/2，小喇叭在精灵图的位置在（234，68），因此只需要将这个坐标缩小1/2即可将其对其展示框展示，即（-117，-34）（负数是因为精灵图整体向x的负半轴，y的负半轴移动，所以为负）

background-size:166px 72px;
background-position:-117px -34px;

总结

background-size是对整个精灵图进行缩放，缩放比例由展示框大小和需要展示的部分来决定，移动坐标也由需要展示的部分的左上角坐标按比例来决定。