如何在没有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 
} 

在我的例子