css 2个图片叠加

在网页设计中，叠加图片效果可以增加页面的美观度和吸引力。使用CSS可以实现两个图片的叠加效果，下面我们来看一下具体实现方法。

HTML代码：
<div class="image-container">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
</div>

CSS代码：
.image-container {
  position: relative;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
}

首先在HTML中创建一个div容器，并在其中添加两张图片。在CSS中，给该div容器设置position为relative属性，使得该容器成为“相对定位”元素。同时，对其中的img标签设置position属性为absolute、top和left属性为0，使得两个图片重叠在一起。

但是，由于两张图片位置重叠，只有其中一张图片会被显示出来，所以需要对其中一张图片进行透明度处理，让另一张图片透过来。下面是修改后的CSS代码：

CSS代码：
.image-container {
  position: relative;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
}

.image-container img:first-child {
  opacity: 0.5;
}

使用:first-child选择器选取第一个img标签，并对其设置opacity属性为0.5，让其透明度为50%。此时，第一张图片会透过第二张图片显示出来，实现图片的叠加效果。

通过以上代码，我们可以简单实现两张图片的叠加效果。对于更复杂的图片叠加效果，还需要更多的CSS代码和技巧。