Zurb Orbit：在图像上添加文本答案

【问题标题】：Zurb Orbit: add text over imagesZurb Orbit：在图像上添加文本
【发布时间】：2013-01-13 23:29:35
【问题描述】：

我想为每张幻灯片添加标题和说明，如下所示：

  <!-- Header -->
  <div id="featured">
      <img src="http://cf2.imgobject.com/t/p/w780/fI3ucpgaVKOUcQ82vhgWmWuLlg2.jpg">
      <img  src="http://cf2.imgobject.com/t/p/w780/dAc3Ob868XGnAX8uOptb7HWx0In.jpg">
      <img  src="http://cf2.imgobject.com/t/p/w780/2fwHVLvh6kdwCujsMwtNmwRJAf1.jpg">   
  </div>

<script type="text/javascript">
    $(window).load(function() {

       $('#featured').orbit();
    });
  </script>

我尝试过使用“字幕”，但没有得到相同的效果。我该怎么办？

Zurb Fondation Orbit

【问题讨论】：

标签： css zurb-foundation orbit

【解决方案1】：

我现在正在与 Foundation 合作，因此我会尽力为您提供帮助。因为在您的反馈会有所帮助之前我还没有这样做。

首先在您的 App.js 中为流体轨道添加这一行：

$('#featuredContent').orbit({ fluid: '800x800' });

800x800 是您的轨道滑块宽度和高度。

然后在您的 App.css 中添加以下内容：

#featuredContent .back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

它在您的 .js 文件中引用您的#featuredContent 并添加一个我们将在 HTML 代码中使用的 .back 类：

<div id="featuredContent">
  <div>
    <h4>This is a content slider.</h4>
    <p>Each slide holds arbitrary content, like text or actions.</p>
    <img class="back" src="/images/test.jpg" />
  </div>
  <div>
    <h4>We can include text and buttons, like this!</h4>
    <p>We take no responsibility for what happens if you click this button.</p>
    <p><a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ" class="button" target="_blank">Rock My World!</a></p>
    <img class="back" src="/images/test.jpg" />
  </div>
  <div>
    <h4>We can include text and buttons, like this!</h4>
    <p>We take no responsibility for what happens if you click this button.</p>
    <p><a href="http://www.youtube.com/watch?v=dQw4w9WgXcQ" class="button" target="_blank">Rock My World!</a></p>
    <img class="back" src="/images/test.jpg" />
  </div>
</div>

我想这应该可以解决问题，并在背景中放置带有标题 (H4) 和描述 (P) 的图片。您还可以使用以下方法自定义标题和描述在 css 中的位置：

#featuredContent p {
}

和

#featuredContent h4 {
}

【讨论】：