我想使用javascript覆蓋其他現有圖像頂部的圖像

我有要放在其他圖像頂部的用戶照片，以便使圖像完整。我想使用javascript覆蓋其他現有圖像頂部的圖像

這裏是我的代碼

<div id="containerDiv"> 
<figure> 
    <img id="someImage" src="../images/someImage.gif" > 
</figure> 

<div id="buttonDiv"> 
     <button>Done</button> 
</div> 
</div>

我有我從緩存中取，並把一些

<img src=cachedImage />

我想要的樣式，以便我可以把緩存的圖片上的其他圖像someImage的頂部也是整個containerDiv應該對瀏覽器窗口做出響應。所以，我想要得到這個CSS的一部分。我嘗試使用相對和絕對定位

<style> 
    #containerDiv{ 
     position:relative; width:100%; height:300px; 
    } 

    #someImage{ 
     position:absolute; top:10px; left:100px; 
    } 

    #buttonDiv{ 
     position:absolute; top:100px; left:200px; 
    } 

</style>

我希望按鈕與someImage響應。但它不隨圖像一起移動。此外，緩存的圖像應該與someImage同步。提前致謝。

來源

2014-12-05 Gaurav

使用jsfiddle使用你的代碼進行演示，你的js也試試 – 2014-12-05 04:46:16

containerDiv的寬度應該設置爲100％，並且所有的子元素都要繼承這個寬度，現在如果你改變瀏覽器的寬度，它會響應變化。 – 2014-12-05 04:54:19

@MurtazaHussain我已經使containerDiv寬度爲100％仍然沒有響應窗口調整大小:( – Gaurav 2014-12-05 05:00:40

我不知道你的代碼，但嘗試這種希望這可以幫助你

<div class="div on which you want to show overlay"> 
    <div class="overlay overlay-div"> 
    <center> 
     <div class="overlay-content"><p>your overlay content,img goes here</p> 
     </div> 
    </center> 
    </div> 
</div>

和CSS的覆蓋是：

.overlay{ 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     z-index: 1050; 
     background-color: rgba(0,0,0,0.5); /*dim the background*/ 
}

可以顯示鼠標懸停覆蓋DIV /輸入/輸出事件。

來源

2014-12-05 06:31:12 Madhav

我想使用javascript覆蓋其他現有圖像頂部的圖像

回答

相關問題