Question

我有用户照片，我想把它放在其他图像的顶部，以便使图像完整。

这是我的代码

<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同步。提前谢谢。

Answer 1

我不知道您的代码，但尝试这希望这有助于您

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

我想使用javascript将图像叠加在其他现有图像之上

1 个答案: