前端技术(15) : 图片重叠比较

<div class="image-container">
  <img src="image1.jpg" class="overlap-image image1" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
  <img src="image2.jpg" class="overlap-image image2" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
</div>

.image2 {
  opacity: 0.5; /* 设置image2的透明度为0.5，突出显示image1 */
  z-index: 1; /* 将image2放在image1之上 */
}

在上述示例中，我们为第二张图片添加了.image2类，并在CSS中设置它的透明度为0.5，以突出显示第一张图片。我们还通过设置z-index属性将第二张图片置于第一张图片之上。

你可以根据需要调整透明度、层叠顺序或其他样式属性，以实现你想要的图片比较效果。请根据你的需求修改类名、样式和图片路径。