CSS可以轻松实现两张图片重叠显示的效果,让我们一起来看看吧。 /*CSS代码*/ .container { position: relative; /*父元素要设置position为relative
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中将这两张图片放在同一个容器中,就可以实现两张图片的重叠显示啦。
粉丝
0
关注
0
收藏
0