如何永久合并两个图像

Question

我有两个不同的图像，我想做的是在第一张图像上重叠第二张图像。我试图在我的网页上创建一张身份证，但我的问题是当我的页面调整第二张图片的大小时失去对齐......

第一张图片是一个blob，它将作为背景..第二张图片是生成的二维码..

<img id="imgko" src=" <?php echo json_decode($bg);?>" style="position:relative; margin: auto;display: block; width: 100%; height: auto;">
<img id="qrko" src="" style="position: absolute;top: 285px;left: 630px;">

有没有办法将第二张图片永久附加到第一张图片上，这样每当浏览器调整大小时，它就不会影响两个图片在 jquery 中的位置？

Answer 1

我不确定我是否理解您的问题，但是，如果您想在同一位置重叠两个图像，您必须创建一个容器（其中将包含两个图像并将其相对定位（以避免图像会以绝对位置离开容器）。

HTML 应该如下所示：

<div class="container">
    <img class="overlaping" src="your first image">
    <img class="overlaping" src="your second image">
</div>

对于 CSS：

.container{
    position: relative;
    width:500px //or whatever desired size
    height:500px //or whatever desired size
}
.overlaping{
    position:absolute;
    top:0;
    left:0;
    width:100%;
}