[分享]css两张图片怎么分割

在网页设计中，我们经常需要将一张图片分割成多个部分，这样可以让网站的页面更加美观。在CSS中，我们可以使用background属性来实现这个效果。下面我们来分别介绍两种分割图片的方法。方法一：使用精灵...

在网页设计中，我们经常需要将一张图片分割成多个部分，这样可以让网站的页面更加美观。在CSS中，我们可以使用background-position属性来实现这个效果。下面我们来分别介绍两种分割图片的方法。

方法一：使用精灵图

 .sprite {
        background: url("sprite.png") no-repeat;
    }

    .sprite-part-1 {
        width: 50px;
        height: 50px;
        background-position: 0 0;
    }

    .sprite-part-2 {
        width: 50px;
        height: 50px;
        background-position: -50px 0;
    } 

这里我们首先定义了一个名为sprite的类，它的背景图是一个包含多个部分的大图。然后我们通过定义不同的background-position来选取不同部分的图像，从而分割出每个小部分。需要注意的是，由于我们选择的是相对背景图左上角的坐标来计算位置，因此对于后续分割的图片，坐标需要逐渐增加。

方法二：使用多个DIV

 .image-container {
        display: flex;
    }

    .image-part-1 {
        flex: 1;
        background-image: url("image1.png");
        background-repeat: no-repeat;
        background-size: cover;
    }

    .image-part-2 {
        flex: 1;
        background-image: url("image2.png");
        background-repeat: no-repeat;
        background-size: cover;
    } 

这个方法比较简单，我们根据需要分割的小部分，创建对应数量的DIV，然后分别为每个DIV设置背景图像，从而实现图片分割。需要注意的是，由于我们使用了flex布局，因此每个小部分的DIV会自动平均分配父容器的宽度。