CSS3技术使得我们能够将多个图像合并成一个图像，即所谓的CSS3精灵图。这种技术能够极大地提高页面的性能，因为将多个图像合并成一个图像会减少HTTP请求次数。同时，也能够使CSS样式更加的简化和清晰。

/* 精灵图的CSS代码 */
.sprite {
background-image: url(sprite.png);
background-repeat: no-repeat;
}
/* 圆圈区域 */
.circle {
background-position: -10px -10px;
width: 50px; 
height: 50px;
}
/* 方块区域 */
.square {
background-position: -70px -10px;
width: 50px; 
height: 50px;
}
/* 三角形区域 */
.triangle {
background-position: -130px -10px;
width: 50px; 
height: 50px;
}

上面是一个CSS3精灵图的代码样例，其中的.sprite类包含了整个精灵图，而每个区域都定义了它们自己的CSS类。通过指定每个类的背景偏移来实现从精灵图中显示出正确的区域。

通过这种方式，我们可以只请求一个图像，而不是三个独立的图像。这将极大地减少加载时间，并提高页面的性能。