css两张图片重合成一张图片

在网页制作中，经常会需要显示多张图片，有时候为了美观起见，我们需要将两张或多张图片重合成一张图片显示。在这种情况下，css就是一种非常好用的工具。下面我们介绍一种方法，用css实现两张图片重合。我们先来看一下代码：

    <div class="img-Box">
        <img src="img1.png" class="img1">
        <img src="img2.png" class="img2">
    </div>

我们首先用一个<div>包住两张图片，用两个<img>标签分别引用这两张图片。接下来我们需要设置这两张图片的样式：

    .img-Box {
        position: relative;
    }

    .img1,.img2 {
        position: absolute;
        top: 0;
        left: 0;
    }

我们将包含两张图片的<div>设置为相对定位，将两张图片同时设置为绝对定位，并且将它们的位置都设置为左上角。这样，两张图片就重合在了一起。但是，这时候还有一个问题，就是两张图片的显示顺序问题。我们可以通过z-index属性来解决这个问题：

    .img1 {
        z-index: 1;
    }
    .img2 {
        z-index: 2;
    }

我们将第一张图片的z-index设置为1，第二张图片的z-index设置为2，这样第二张图片就会显示在第一张图片的上面。

最后，我们可以通过设置两张图片的width和height属性来控制它们的大小：

    .img1,.img2 {
        width: 200px;
        height: 200px;
    }

这样，两张图片就被设置为200px×200px的大小了。

以上就是用css实现两张图片重合的方法，如果你在实际开发中遇到了这样的需求，可以试试这种方法。