使用HTML小部件叠加图像

Question

我有一个小部件的HTML代码，我希望将其叠加到我博客中的图像上。我不确定HTML代码将是什么来实现这一目标。建议？

Answer 1

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;