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

本文将介绍如何使用CSS实现两张图片透明重叠。在CSS中，可以使用zindex属性来控制元素的层次关系。zindex属性值越大的元素，就会被放置在越靠前的位置。所以，我们可以通过调整两张图片的zind...

本文将介绍如何使用CSS实现两张图片透明重叠。

在CSS中，可以使用z-index属性来控制元素的层次关系。z-index属性值越大的元素，就会被放置在越靠前的位置。所以，我们可以通过调整两张图片的z-index属性值，来控制它们的堆叠顺序。

 .img1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .img2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0.5; /* 设置透明度为50% */
  } 

在上面的代码中，.img1和.img2分别是两张图片的类名。我们使用了position属性来将它们定位为绝对位置，然后通过top和left属性来调整它们的位置。.img1的z-index属性值为1，.img2的z-index属性值为2。这样，.img2就会被放置在最前面，实现了两张图片的重叠效果。同时，我们还设置了.img2的opacity属性为0.5，使得它50%透明度。

完整的CSS代码如下：

 .img1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  .img2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0.5;
  } 

需要注意的是，上面的代码只是为了演示效果，实际应用中可能需要根据页面布局和需求来进行调整。