CSS+合成图片是一种常用的Web前端技术。该技术可以将多张小图片合并为一张大图片，从而减少网页加载的HTTP请求次数，提升网页的加载速度。本文将介绍CSS+合成图片的基本原理和步骤。

CSS+合成图片的基本原理是利用CSS的background属性和background-position属性来显示合成后的大图片。具体来说，我们需要按照一定的规则将多张小图片排列在一张大图片中，并将这张大图片赋值给CSS的background属性。然后，我们可以通过CSS的background-position属性来控制显示哪一部分的小图片。

/* 定义小图片的样式 */
.logo {
width: 100px;
height: 100px;
background-image: url('logo.png');
}
/* 定义大图片的样式 */
.sprite {
background-image: url('sprite.png');
}
/* 控制显示哪个小图片 */
.logo1 {
background-position: 0 0;
}
.logo2 {
background-position: -100px 0;
}
.logo3 {
background-position: -200px 0;
}
/* HTML代码 */

上面的代码中，我们首先定义了三个小图片（分别为.logo1、.logo2和.logo3），它们共用一张大图片（.sprite）。然后，我们通过CSS的background-position属性控制显示哪个小图片。

总的来说，CSS+合成图片是一种优化Web前端性能的方法。虽然需要一定的额外工作，但通过减少HTTP请求次数，我们可以提高网页的加载速度，从而提升用户的体验。