覆盖多个图像

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

image1的： “主” 图像（图像1应该设置最大高度和用于imageContainer最大宽度 - 上述SE HTML） [蓝色边界]
IMAGE2：horizontal-align: center;和top: 0;相对于IMAGE1 [粉红边界]
图像3：从原点尺寸由10％调整，horizontal-align: center;相对于图像1 [绿色边框]

我容易出错的HTML + CSS导致了这一点：

我无法弄清楚如何我的CSS应该是。我应该怎么做才能达到[image4]的效果？

Answer 1

您可以更新代码再次图像旋转transperancy问题 更新的代码透明

图像有一个股利和更多的背景，例如使其：

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

这是迪更简单的方法展开它。当然，在我放置定位值的地方，您必须添加一个定位值。

UPDATE

在你之后说的话，我想你可以使用3周绝对定位的div你的背景和使用CSS3属性transform操纵它们。它使您可以旋转，缩放和更多与您的元素。你也可以用JavaScript来操作它。

More info about css3 transform

Answer 2

让我申请图像旋转的量角器图像（图像2） 希望帮助你

<style type="text/css"> 
    .imageContainer { 
     position: relative; 
     width:165px; 
     height:169px; 
    } 

    #image1 { 
     position: absolute; 
     top: 0; 
     z-index: 10; 
     width:120px; 
     height:120px; 
     border: 1px solid blue; 
    } 
    #image2 { 
     position: absolute; 
     top: 0; 
     z-index: 20; 
     border: 1px solid fuchsia; 
     opacity:0.6; 
    filter:alpha(opacity=60); /* For IE8 and earlier */ 


    /*for adding image rotation */ 
     -webkit-transform: rotate(90deg); /*//For chrome and safari*/ 
     -moz-transform: rotate(90deg); /*//For ff*/ 
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /*// For ie */ 
    /* End for adding image rotation */ 



    } 
    #image3 { 
     position: absolute; 
     top: 0; 
     z-index: 30; 
     width: 40%; 
     height: 40%; 
     border: 1px solid green; 
     left:70px; 
     opacity:0.9; 
    filter:alpha(opacity=90); /* For IE8 and earlier */ 


    } 

    </style> 






    <form name="frmabc" action="" method="post"> 
<div class="imageContainer"> 
    <img id="image1" src="Es4OT.png"/> 
    <img id="image2" src="WQSuc.png" /> 
    <img id="image3" src="Xebnp.png" /> 
</div> 
</form>