覆蓋多個圖像

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>