帶有「窗口」在另一個圖像的PNG圖像

我試圖達到一個效果，當一個div與PNG IMG裏面（這個IMG有洞）在另一個div與IMG裏面，將出現在圖像孔它，但現在它仍然結束，而不是在與「窗口」img下。而且我仍然希望div裏面帶有窗口圖像（「iphone」）的div必須在img（「iphone-screen」）內部，因爲響應性問題（內部div的百分比寬度與外部div的寬度有關）。如何實現這一目標？這裏是鏈接到我的網站（轉到頁「KONTAKT」）： CLICK 帶有「窗口」在另一個圖像的PNG圖像

這是我的HTML標記：

<div id="slide6" class="slide"> 
     <h1 class="big">Kontakt</h1> 
     <h2 class="call">Zadzwoń: <span class="thick">514 944 555</span></h2> 
     <h2 class="mail"> 
      Napisz: <a href="mailto:[email protected]"><span class="thick">[email protected]</span></a> 
     </h2> 
     <div id="iphone"> 
      <img src="img/iphone.png" alt="" /> 
      <div id="iphone-screen"> 
       <img src="img/iphone-screen.png" alt="" /> 
      </div> 
     </div> 
    </div>

和CSS：

#slide6 #iphone{ 
    position:absolute; 
    bottom:0; 
    right:0; 
    width:40%; 
    z-index:600; 
} 

#slide6 #iphone > img{ 
    width:100%; 
    height:auto; 
    z-index:600; 
} 

#slide6 #iphone #iphone-screen{ 
    position:absolute; 
    width:44.1%; 
    overflow:hidden; 
    bottom:24%; 
    left:15%; 
    z-index:100; 
} 

#slide6 #iphone #iphone-screen > img{ 
    width:100%; 
    height:auto; 
    z-index:100; 
}

感謝您的幫助！

來源

2012-10-01 lukaleli

我想這是與它是div標籤'iphone-screen'..remove它 – Anirudha

問題的問題。謝謝！ – lukaleli

我想這是與div標籤iphone-screen ..remove它

來源

2012-10-01 19:17:28 Anirudha

帶有「窗口」在另一個圖像的PNG圖像

回答

相關問題