[分享]css两张图片重叠显示

CSS可以轻松实现两张图片重叠显示的效果，让我们一起来看看吧。

 /*CSS代码*/
    .container {
        position: relative;
        /*父元素要设置position为relative*/
    }
    .img1 {
        position: absolute;
        /*第一张图片要设置position为absolute*/
        top: 0;
        left: 0;
        z-index: 1;
        /*设置z-index为1，使其在第二张图片上方*/
    }
    .img2 {
        position: absolute;
        /*第二张图片也要设置position为absolute*/
        top: 0;
        left: 0;
        z-index: 0;
        /*设置z-index为0，使其在第一张图片下方*/
    } 

以上代码中，我们首先将父元素的position属性设置为relative，这样可以让子元素的position属性生效。接着，我们将第一张图片的position属性设置为absolute，并且将它的z-index属性设置为1，让它在第二张图片上方。然后，我们再将第二张图片的position属性设置为absolute，并且将它的z-index属性设置为0，让它在第一张图片下方。

最后，我们只需要在HTML中将这两张图片放在同一个容器中，就可以实现两张图片的重叠显示啦。