我想使用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覆盖其他现有图像顶部的图像

回答

相关问题