叠加几个图像

Question

我有我想覆盖三个图像(用HTML + CSS,我不希望尽可能地使用JavaScript):

这是我想要实现的结果:
[图像4]

这是我尝试过的:

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>?

图像1:"主"图像(图像1应该设置最大高度和用于imageContainer最大宽度-上述SE HTML) [蓝色边框]
IMAGE2:horizontal-align: center;和top: 0;相对于IMAGE1 [粉红边界]
图像3:从它的原点大小由10%调整大小,horizontal-align: center;相对到image1 [绿色边框]

我的错误HTML + CSS导致了这个:

我无法弄清楚我的CSS应该如何.我该怎么做才能达到像[image4]这样的结果？

Answer 1

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

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

这是显示它的更简单方法.当然,在我放置定位值的地方,您必须添加一个.

UPDATE

在你说之后的情况下,我认为你可以使用3个绝对定位div与你的背景,并用css3 transform属性操纵它们.它使您可以使用元素旋转,缩放等等.你也可以用javascript操作它.

有关css3 transform的更多信息