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

CSS中可以实现两张图片重叠在一起，同时还可以设置其中一张图片为透明效果。

  .container {
      position: relative;
    }

    img {
      position: absolute;
      top: 0;
      left: 0;
    }

    .overlay-img {
      opacity: 0.6;
    } 

以上代码中，我们先创建了一个容器并设置其为相对定位，这是因为后面设置绝对定位的元素需要相对于其父元素进行定位。

接着，我们通过设置两张图片的绝对定位，让它们重叠在一起，同时可以通过调整top和left来达到想要的位置效果。

最后，通过设置覆盖图的opacity属性，让其透明度为0.6，从而呈现出透明的效果。

下面是HTML部分的代码，其中覆盖图需要放在后面作为后面的图片。

  <div class="container">
      <img src="IMAGE1.jpg" alt="图片1"/>
      <img src="IMAGE2.jpg" alt="图片2" class="overlay-img"/>
    </div>