如何将图像叠加在其他图像之上？

Question

我正在尝试将一个图像覆盖在另一个基本图像上。 我使用的图像不符合特定尺寸，但因页面而异。

每个图像叠加层都使用类似于下面提到的样式表：

#image1 {
    position: absolute;
    top: 44.594%;
    left: 30.642%;
    transform: translate(-50%, -50%);
}

基本图像使用类似于下面提到的样式表：

.base-image {
    position: relative;
    text-align: center;
}

到目前为止，如果图​​像小于屏幕尺寸，我没有任何问题。 如果大于当前屏幕尺寸，则位置相对于屏幕尺寸。

如果我将基本图像位置更改为绝对位置，我会得到我感兴趣的效果，但我的页面的其余部分会隐藏在基本图像下。

我可以在 CSS 中做些什么来达到我想要的效果吗？

一个页面的片段之一：

<div class="base-image">
    <img src="Content/Images/baseimage.jpg" />
    <div id="image1">
        <img src="Content/Images/image1.jpg" alt="image1" />
        <br />
        <span>Some Text</span>
    </div>
    <div id="image2">
        <img src="Content/Images/image2.jpg" alt="image2" />
        <br />
        <span>Some Text 2</span>
    </div>
    ...
</div>

问题类似，但没有直接解决我的问题： Html Image over image

他们的解决方案是我迄今为止用来覆盖图像的方法。但是由于某种原因，当图像分辨率大于屏幕尺寸时，生成的叠加层似乎会按比例缩小以适应屏幕分辨率。因此，图像位置相对于基础图像都是错误的。

Answer 1

我很确定你可以创建一个与当前图片具有相同位置属性的<div>，然后让<div> 中的图片有一个position:fixed，然后使用top:10%; left:10% 随意移动图片等等

希望对你有帮助