Question

我不是编程的新手，但我是Zurb Foundation的新手并使用的是Foundation 5.我有一些简单的面板，下面是图像和文字。 Foundation是否有能力为图片添加文本叠加？当然，我可以将文本整合到图片中，但我希望能够快速将其交换出来。有没有办法覆盖它？这就是我现在所拥有的

<div class="large-3 small-6 columns">
  <img src="mypic.jpg" />
  <h6 class="panel"><strong>My Pic Description</strong></h6>
</div>

请注意，在上面的示例中，我仍然会保留＆＃34;我的图片描述＆＃34;，但我会在＆＃34; mypic.jpg＆＃34;上覆盖其他文字。这可能吗？

Answer 1

好吧，基金会没有叠加文字功能。但是，我们可以手动完成。

基金会使用left / right padding s作为列（.columns），此外， overlay 应位于< EM>图像

因此我们需要为图像和 overlay 文本添加包装，以便定位 overlay 正确。

这是我的尝试：

<强> HTML：

<div class="large-3 small-6 columns">
    <div class="overlay-container">
        <img src="http://lorempixel.com/500/300" />
        <div class="overlay">Overlay text</div>
    </div>

    <h6 class="panel"><strong>My Pic Description</strong></h6>
</div>

<强> CSS：

.overlay-container {
  position: relative; /* <-- Set as the reference for the positioned overlay */
}

.overlay-container .overlay {
  position: absolute; /* <-- Remove the overlay from normal flow         */
  bottom: 0;          /* <-- Keep the overlay at the bottom of the box   */
  left: 0;            /* <-- Set left and right properties to 0          */
  right: 0;           /*     In order to expand the overlay horizontally */

  padding: 0.4rem;
  background-color: rgba(255, 255, 255, 0.7);
}

<强> WORKING DEMO

更新

要完全在图片上显示叠加层，您可以将top类的.overlay属性设置为0。（只需top: 0;）

但文本本身会显示在图片的顶部。

为了在叠加层的中间显示文字（可能有多个未知高度的句子），您可以点击 this approach I explained lately 关于SO，如下：

.overlay-container .overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.4rem;
  background-color: rgba(255, 255, 255, 0.7);
  text-align: center;
  font: 0/0 a; /* Remove the gap between inline(-block) elements */
}

.overlay-container .overlay:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.overlay-container .overlay span {
  font: 16px/1 Arial, sans-serif; /* Reset the font property */
  display: inline-block;
  vertical-align: middle;
}

并按<span>包裹文字：

<div class="overlay">
    <span>Overlay text</span>
</div>

<强> WORKING DEMO

使用Zurb Foundation为面板和图像添加文本叠加层？

1 个答案:

更新