css三个图片拼成一张图片

在网页设计中，常常需要使用多个小图片来组合成一张大的图片。这时候，我们可以利用CSS中的background-image、background- position和background-size属性，将多张小图片拼接成一张大图片。

.img-box {
  background-image: url(img1.jpg), url(img2.jpg), url(img3.jpg);
  background-position: top left, top right, bottom;
  background-size: 300px 300px;
  width: 900px;
  height: 600px;
} 

在上面的代码中，我们定义了一个class为img-box的div元素，通过background-image属性设置了三张图片的URL，使用逗号分隔，分别表示从上到下拼接的位置。接着通过background-position属性分别设置了三张小图片在背景图片中的位置。最后，通过background-size属性指定了背景图片的大小，即每个小图片的大小。

在预览此代码时，需要注意的是图片的加载顺序。在加载图片时会按照background-image属性中URL的顺序依次加载，如果图片尺寸不一致，在预览时可能会出现重叠或者有部分被遮挡的情况。因此，我们在使用时需注意每个小图片的大小应该一致。

通过上面的方法，我们就可以轻松地将多张小图片拼接成一张大的图片，不仅可以减少网页请求量，还能达到更好的视觉效果。