如何在没有SVG的情况下使两个图像重叠

Question

我有一个徽标和一个没有文字的小版本徽标。我希望两个图像重叠，以便当页面加载时，大版本将淡出，轴将在与大版本相同的位置淡入。这是我的意思的gif

我不确定是否有一个特殊的伎俩，但是我尝试了一切，移动一个东西移动另一个，我不能让它们正确重叠而不搞砸。我希望徽标位于红色箭头上方区域的中间。 DEMO

Answer 1

将两张图片放入有position: relative的容器中，并提供图片position: absolute。这样，您就可以将图像放在彼此的顶部，并为它们提供准确的top和left坐标。

<强> HTML

<div id="logo-container">
    <img id="logo1"></img>
    <img id="logo2"></img>
</div>

<强> CSS

#logo-container {
    position: relative;
}

#logo-container > img {
    position: absolute;
}

#logo1 {
    top: 0;
    left: 0;
}

#logo2 {
    top: 200px; // change me
    left: 130px; // change me
}