Html 添加文本叠加到面板和图像Zurb基金会？ 我不是新手，但我是Zurb基金会的新手，我正在使用基金会5。我有一些简单的面板，包括下面的图像和文本。基金会是否有能力为图片添加文本覆盖？当然，我可以将文本整合到图片中，但我希望能够快速地将其替换掉。有没有办法把它叠起来？这就是我现在拥有的 <div class="large-3 small-6 columns"> <img src="mypic.jpg" /> <h6 class="panel"><strong>My Pic Description</strong></h6> </div> 我的图片描述

请注意，在上面的示例中，我仍然保留“mypic Description”，但我会在“mypic.jpg”上覆盖额外的文本。这是可能的吗？

嗯，基金会没有覆盖文本特征。但是，我们可以手动完成

Foundation对列（

.columns

）使用

左

/

右

填充

），此外，覆盖层应位于图像上方

因此，我们需要为图像和覆盖文本添加一个额外的包装器，以便正确定位覆盖

以下是我的尝试：

HTML:

覆盖文本
我的图片描述

CSS:

.overlay容器{
position:relative；/*非常好的答案！谢谢。这肯定让我非常接近。我正在尝试扩展这个答案，以便背景颜色占据整个DIV，而不仅仅是我有文本的部分。因此，整个图像的顶部都会有不透明的颜色（现在正是有文本的地方）。我尝试将背景颜色移动到覆盖容器定义，但似乎不起作用。想法？@JimBeam文本本身如何？它应该显示在顶部、底部还是中间？我修改了您的答案，使div从右上角开始