[分享]css两张图片覆盖

在网页开发中，如果我们想要让两张图片覆盖在一起，使用CSS就可以简单地实现。下面是一个示例代码，你可以在CSS中设置背景图片并使用绝对定位来覆盖其他元素。.overlay { : relative; ...

在网页开发中，如果我们想要让两张图片覆盖在一起，使用CSS就可以简单地实现。下面是一个示例代码，你可以在CSS中设置背景图片并使用绝对定位来覆盖其他元素。

.overlay {
  position: relative;
  display: inline-block;
  width: 400px;
  height: 400px;
}

.overlay img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.overlay .top {
  background: url('top-image.jpg') no-repeat center center;
  background-size: cover;
  z-index: 1;
}

.overlay .bottom {
  background: url('bottom-image.jpg') no-repeat center center;
  background-size: cover;
  z-index: 2;
} 

在这个代码中，我们首先创建了一个容器元素，给它设置了相对定位。然后，我们在容器内部放置了两个图片元素，并将它们定位在同一个位置。接着，我们为每张图片指定了一个CSS类别：`.top` 和 `.bottom`，并设置他们的背景图片和覆盖顺序。因为我们希望底部的图片在上面进行覆盖，所以我们将其z-index属性设置为2，而顶部的图片则设为1。

这种方法非常简单，而且可以用于许多不同的情景。不管你是想创建一个图像效果，还是想将多张图片放在同一个页面上，使用CSS来实现图片覆盖是非常有帮助的。