html - 叠加多个图像

Question

我想叠加三个图像(使用 HTML + CSS，我不想尽可能使用 javascript):

这是我想要达到的结果:
[image4]

这是我试过的:

CSS:

.imageContainer {
    position: relative;
}

#image1 {
    position: absolute;
    top: 0;
    z-index: 10;

    border: 1px solid blue; 
}
#image2 {
    position: absolute;
    top: 0;
    z-index: 100;

    border: 1px solid fuchsia; 
}
#image3 {
    position: absolute;
    top: 0;
    z-index: 1000;

    width: 10%;
    height: 10%;

    border: 1px solid green; 
}

HTML:

<div class="imageContainer">
    <img id="image1" src="http://i.stack.imgur.com/Es4OT.png"/>
    <img id="image2" src="http://i.stack.imgur.com/WQSuc.png"/>
    <img id="image3" src="http://i.stack.imgur.com/Xebnp.png"/>
</div>​

image1:“主”图像(image1 应该为 imageContainer 设置最大高度和最大宽度 - 上面的 HTML) [蓝色边框]
image2:horizo​​ntal-align: center; and top: 0; relative to image1 [pink border]
image3:相对于其原始大小，horizo​​ntal-align: center; 相对于 image1 [绿色边框]

调整了 10%

我容易出错的 HTML + CSS 结果是:

我想不出我的 CSS 应该是什么样子。我应该怎么做才能获得像 [image4] 这样的结果？

Answer 1

例如，您可以使用一个 div 和多个背景来制作它:

#someDiv 
{
  background: url('topImage.jpg') center,
            url('imageInTheMiddle.jpg') 0px 0px,
            url('bottomImage.jpg') /*some position*/;
}

这是更简单的显示方式。当然，在我放置定位值的地方，您必须添加您自己的值。

更新

在您之后所说的情况下，我认为您可以在背景中使用 3 个绝对定位 div，并使用 css3 transform 属性对其进行操作。它使您可以对元素进行旋转、缩放等等。您还可以使用 javascript 对其进行操作。

More info about css3 transform