具有绝对定位文本的图像

Question

我想在此页面上复制4个方形图像：https://pura-moringa.de/ - ＆gt;向下滚动一次

但我无法弄清楚如何做到这一点..如何在所有4个方格中获取图像上的文字？

这是我的代码（试图从页面复制它以理解它，但不起作用）

这是一个方块：

   <div class="col-xs-6">
<div class="minibanner is-square">
<img class="minibanner-image" src="https://pura-moringa.de/skin/frontend/copimaj/default/images/minibanners/moringa-feel-good.jpg" alt="7 Gründe, warum du dich mit Moringa besser fühlst"/>
<div class="minibanner-content">
<h3>10 Gründe, warum du dich mit Moringa besser fühlst</h3>
<a class="btn btn-sm btn-primary" href="https://pura-moringa.de/moringa-wirkung" title="10 Gründe, warum du dich mit Moringa besser fühlst">Mehr erfahren</a>
</div>
<a class="overlay" href="https://pura-moringa.de/moringa-wirkung" title="10 Gründe, warum du dich mit Moringa besser fühlst"/>
</div>
</div>

https://jsfiddle.net/rrbb2L5j/#&togetherjs=CtR9J6JfnD

谢谢！

Answer 1

您可以使用绝对位置

来完成此操作

.minibanner-content{
  position:absolute;
  top:0;
}
.minibanner.is-square{
  position:relative;
}