使用Zurb Foundation向面板和图像添加文字叠加层吗? [英] Add text overlay to panel and image with Zurb Foundation?

问题描述

我对编程并不陌生，但是对Zurb Foundation并不陌生，并且正在使用Foundation5.下面有一些简单的面板，其中包括图像和文本. Foundation是否有能力在图片上添加文字叠加层?当然，我可以将文本整合到图片中，但是我希望能够快速将其替换掉.有没有一种方法可以覆盖它?这就是我现在拥有的

I am not new to programming but I am new to Zurb Foundation and am using Foundation 5. I have some simple panels that consist of image and text below. Does Foundation have the capability to add a text overlay to a picture? Of course, I could integrate the text into the picture, but I'd like to be able to quickly swap it out. Is there a way to just overlay it? This is what I have now

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

请注意，在上面的示例中，我仍将保留我的图片描述"，但在"mypic.jpg"上将覆盖其他文本.这可能吗?

Note that in the above example, I would still keep "My Pic Description", but I would have additional text overlayed on "mypic.jpg". Is this possible?

推荐答案

嗯， Foundation没有叠加文本功能.但是，我们可以手动执行此操作.

Well, Foundation doesn't have the overlay text feature. However, we can do that manually.

Foundation对列(.columns)使用left/right padding s，此外， overlay 应该放置在 image 上.

Foundation uses left/right paddings for the columns (.columns) and furthermore, The overlay should be positioned over the image.

因此，我们需要为图像和 overlay 文本添加一个额外的 wrapper ，以便放置 overlay 正确.

Hence we need an additional wrapper for the image and the overlay text in order to position the overlay correctly.

这是我的尝试:

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

为了完全显示图像上的叠加层，可以将.overlay类的top属性设置为0. (简单地top: 0;)

In order to display the overlay over the image completely, you could set the top property of .overlay class to 0. (Simply top: 0;)

但是文本本身将显示在图像的顶部.

But the text itself would be displayed at the top of the image.

为了在叠加层的中间显示文本(可能有多个高度未知的句子)，您可以按照 我最近对SO进行了解释 ，如下:

In order to display the text (which may has multiple sentences with unknown height) at the middle of the overlay, you could follow this approach which I explained lately on SO, as follows:

.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向面板和图像添加文字叠加层吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！