[分享]css中如何设置两张图片重叠

在CSS中，我们可以使用background属性来设置背景图像，并通过background属性来指定图片相对于容器的位置。如果我们想要两张图片重叠在一起，可以采用以下步骤。 .container { ...

在CSS中，我们可以使用background属性来设置背景图像，并通过background-position属性来指定图片相对于容器的位置。如果我们想要两张图片重叠在一起，可以采用以下步骤。

.container {
    position: relative;
    /*设定容器的宽高*/
    width: 300px;
    height: 300px;
}

img {
    /*设定图片绝对定位*/
    position: absolute;
}

img.first {
    /*设定第一张图片的位置*/
    top: 0;
    left: 0;
}

img.second {
     /*设定第二张图片的位置*/
    top: 50px;
    left: 50px;
} 

在上述代码中，我们采用了相对定位的容器来固定两张图片的位置。接着，我们使用绝对定位来指定每张图片在容器中的位置，其中第一张图片的位置为容器的左上角(0, 0)，第二张图片的位置为容器中间(50, 50)。如果我们想要两张图片完全重叠，只需将第二张图片的位置设定为(0, 0)即可。

另外，我们还需要注意到层叠顺序(z-index)的问题。在一般情况下，后面指定的元素会覆盖在前面指定的元素之上。如果我们想要调整两张图片的层叠顺序，只需在CSS中使用z-index属性，值为正整数。值越大的元素会覆盖在值较小的元素之上。

img.first {
    z-index: 2;
}

img.second {
    z-index: 1;
} 

在上述代码中，我们将第一张图片的层叠顺序设定为2，第二张图片的层叠顺序设定为1。此时，第一张图片会覆盖在第二张图片之上。