CSS精灵图是将多个小图片合并成一张大图片，通过CSS的background-position属性来定位显示需要的小图片，从而减少页面请求数量，提高网页加载速度，优化用户体验。

CSS精灵图的取值要知道两个属性，一个是background-position-x，一个是background-position-y。其中background-position-x是用来设置背景图横向方向上的位置的，可以设置为具体的像素值，也可以用关键字left、center和right；background-position-y是用来设置背景图纵向方向上的位置的，一般也是用关键字top、center和bottom。两个属性组合在一起就可以精确地定位某张小图片了。

.demo {
width: 160px;
height: 160px;
background-image: url(sprite.jpg);
}
.demo1 {
background-position: -40px -60px;
}
.demo2 {
background-position-x: -80px;
background-position-y: -120px;
}

在上面的代码中，我们首先定义了一个CSS类.demo，它的宽高都是160px，并且引用了一张名为sprite.jpg的精灵图。接着我们又定义了两个新的CSS类.demo1和.demo2，它们分别设置了不同的background-position值来获取精灵图中的不同小图片。

通过使用CSS精灵图，可以使页面更加流畅和高效，因此在设计和开发过程中，我们应该在必要的时候采用精灵图技术，从而提高网页性能。