多个小图标集成一张背景图片的定位显示问题

多个小图标集成到一张png图片上，如图。
图片宽度是750px，左上角图标的xy是0，0，宽高是33px，24px。
如果我在uniapp中css调用代码如下，背景图标可以完整的显示，但宽度会很大。
.img{width: 33px ;height:24px;background-position: 0px 0px;background:url(test.png) no-repeat}
如果用width:33rpx,height:24rpx的话，只能显示小图标的一个角落。

如果小图标单独做成一个小图片，用rpx显示的话，能完整显示，并且整体的效果会比较好
.img{width: 33rpx ;height:24rpx;background:url(a.png) no-repeat}.

现在的问题是多个小图标集合成一个图片时，如何解决图标能完整的显示出来。
谢谢。