如何在reveal.js中的背景图像上放置归属文本？

【问题标题】：How do I put attribution text on background images in reveal.js?如何在reveal.js中的背景图像上放置归属文本？
【发布时间】：2014-09-10 16:52:06
【问题描述】：

我正在考虑使用reveal.js http://lab.hakim.se/reveal-js/ 进行一系列讲座。对于幻灯片上的任何背景图像，我希望能够将归属文本放在不显眼的地方（右下角）。这些是使用设置的

<section background-data="url(...)">

在“源”HTML 的 <slides> 部分中。我对 JS / CSS 了解的不够深入，无法深入研究reveal.js 源代码，但看起来应该不会太难。

我尝试将完整的幻灯片清晰图像作为内容放在幻灯片中，然后将内容放在上面，但它看起来很笨重（不是真正内容的额外内容），而且它也没有将归因与它真正属于的元素（背景数据图像）。

以前有人知道吗？

【问题讨论】：

【解决方案1】：

只需添加

.attribution{
    position:absolute;
    bottom:0;
    right:0;
    font-size:0.5em
}

到你的CSS，和

<span class="attribution">Attribution Text</span>

在您的<section> 中。

另外，根据the docs，应该是

data-background="http://example.com/background.png"

而不是

background-data="url('http://example.com/background.png')"

JS 会检测它是否是一个 url，这与 CSSbackground 属性不同。

【讨论】：

哇，第一次上stackoverflow——真快！它奏效了！谢谢。现在只需要稍微扩展幻灯片的边距，让bottom: 0 将它放在屏幕的底部。但会先尝试为自己解决这个问题。
@DavidO 没问题！由于reveal.css 给了section position:absolute，我们可以给它的孩子绝对定位。 Here's a good article on the bottom property.