css sprites技术关键是

CSS Sprites技术关键在于将多张小图片合并为一张大图片，通过CSS的background-position属性来切换显示不同的小图片。这样可以减少页面请求次数，加快页面加载速度，提升用户体验。

.icon {
  width: 20px;
  height: 20px;
  background-image: url(sprites.png);
}

.icon-home {
  background-position: 0 0;
}

.icon-search {
  background-position: -20px 0;
}

.icon-cart {
  background-position: -40px 0;
}

在上面的例子中，我们使用了一个20x60像素的图片sprites.png，包含了3个20x20像素的小图片（home、search、cart）。可以看到，在.icon类中，我们设置了图片的宽度和高度，同时指定了背景图片的地址。在.icon-home、.icon-search、.icon-cart类中，我们利用background-position属性，分别将小图片的位置设置为0 0、-20px 0、-40px 0。这样，当我们在HTML中使用.icon类时，就可以轻松地对应到每个小图片，并且只需要加载一张大图片。