解释一下 CSS Sprite，以及如何在页面或网站中使用它 ？

CSS Sprite是一种处理网页图片的技术，主要用于优化网站的加载速度。这种技术的核心思想是将网页上的一些小图标和背景图像合并到一张大图（即雪碧图）中，然后通过CSS的background-image，background-repeat，background-position属性来显示需要的图片部分。

使用CSS Sprite的好处主要有两个方面：

1. 减少HTTP请求：每一张图片的加载都需要一个HTTP请求，请求过多会影响页面的加载速度。将多张图片合并到一张图片中，可以大幅度减少HTTP请求的数量。

2. 减少图片的总大小：虽然合并后的图片大小可能会比原来的总和大一些，但是如果你的图片数量非常多，总体上看，使用CSS Sprite还是可以减小图片的总大小。

如何在页面或网站中使用CSS Sprite呢？

假设我们有一个雪碧图，里面包含了一个搜索图标和一个购物车图标，我们可以这样使用：

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

.icon-search {
  background-position: 0 0; /* 搜索图标在雪碧图的位置 */
}

.icon-cart {
  background-position: -50px 0; /* 购物车图标在雪碧图的位置 */
}

然后在HTML中，你可以这样使用：

<div class="icon icon-search"></div>
<div class="icon icon-cart"></div>

这样，搜索图标和购物车图标就会显示出来了