CSS精灵图是前端界常用的一种优化网站性能的方式，它的核心属性包括尺寸、位置、背景定位等。

.sprite {
  display: inline-block; /* 设置为行内元素 */
  width: 100px;
  height: 100px;
  background: url(sprite.png) no-repeat; /* 设置背景图片 */
  background-position: -100px -200px; /* 设置背景图片位置 */
}

其中，display属性设置为inline-block，将元素设置为行内块级元素，避免了相邻元素的高度塌陷。width和height属性分别设置元素的宽度和高度。background属性设置精灵图的URL和不重复，这样就可以利用一张图片展示多个小图标了。

background-position属性设置精灵图的背景位置，可以用负值移动背景图片。如上面的代码，-100px -200px代表向左移动100像素，向上移动200像素，实现了切换不同小图标的效果。

如果需要设置不同大小的小图标，只需调整元素的width和height属性，并在background-position属性中适当调整位置即可。同时，需要注意的是，CSS精灵图在实际开发中，需要根据不同的浏览器进行优化，以保证高效的性能和用户体验。