用 HTML 小部件叠加图像

Question

我有一个小部件的HTML代码，我想把它叠加到我博客中的图像上。 我不确定完成此操作的HTML代码是什么。 建议？

Answer 1

您绝对可以将小部件放在图像的顶部，并将它们放在一个容器中，但是如果不看到您到底想用小部件做什么，就很难知道。

这是一个非常粗略的例子，带有图像和一些文本。

.container {
  position: relative;
}
.img-1 {
  width: 300px;
}
.overlay {
  position: absolute;
  left: 10px;
  top: 10px;
  background: yellow;
  opacity: 0.8;
}

<div class="container">
<img src="https://images.pexels.com/photos/941736/pexels-photo-941736.jpeg" class="img-1">
<div class="overlay">
Div content to go over the top of the image.
</div>
</div>