我想为每张幻灯片添加标题和说明,如下所示:
<!-- 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>
我试过使用“字幕”,但没有得到相同的效果。我该怎么办?
最佳答案
我现在正在与 Foundation 合作,所以我会尽力帮助您。因为在您的反馈会有所帮助之前我还没有这样做过。
首先在您的 App.js 中为 Fluid Orbit 添加这一行:
$('#featuredContent').orbit({ fluid: '800x800' });
800x800 是您的轨道 slider 宽度和高度。
然后在您的 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 {
}
关于css - Zurb 轨道 : add text over images,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14309481/