[分享]css两张图片重叠一起

CSS是一种非常重要的前端开发技术，有时候我们希望两张图片可以重叠在一起进行展示，这样可以美化页面效果。在CSS中实现两张图片重叠还是比较简单的，我们可以使用属性将这两张图片进行定位，并确定它们的层级...

CSS是一种非常重要的前端开发技术，有时候我们希望两张图片可以重叠在一起进行展示，这样可以美化页面效果。

在CSS中实现两张图片重叠还是比较简单的，我们可以使用position属性将这两张图片进行定位，并确定它们的层级来实现重叠效果。

/*HTML代码*/
<div class="img-container">
  <img src="image1.jpg" alt="图片1">
  <img src="image2.jpg" alt="图片2">
</div>

/*CSS代码*/
.img-container {
  position: relative;
}
.img-container img:first-child {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.img-container img:last-child {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
} 

这段代码中，我们首先将包含这两张图片的div设置为相对定位的容器。然后我们使用选择器:first-child和:last-child分别获取这两张图片，使用绝对定位将它们放置在同一个位置上并分别设置不同的层级（也就是z-index）。

其中，第一张图片的层级设置为1，第二张图片的层级设置为2，这样第二张图片就会在第一张图片的上层进行展示，从而达到重叠的效果。

这样，我们就可以简单地通过CSS实现两张图片的重叠效果，让我们的页面效果更加丰富炫酷。