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%等等

希望这有帮助

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

1 个答案: