css - 我可以在 Reveal.js 的右下角添加标题吗？

Question

我有一个使用大量背景图像的 Reveal.js 幻灯片:

<section data-background="latimes.png">
    <small class="caption">[Some Text](http://a.link.com/whatever)</small>
    <aside class="notes">some notes</aside>
  </section>

我想在每张幻灯片的左下角为每张图片添加标题/链接。

我尝试设置自定义类

.reveal .caption a {
  background: #FFF;
  color: #666;
  padding: 10px; 
  border: 1px dashed #999;
}

.reveal .caption {
  postion: absolute; 
  bottom: 0px;
  left: 50px;
}

不过好像对布局没有什么影响。元素检查器似乎不能很好地与 Reveal.js 一起使用，这使得它很难排除故障。在 reveal.js 中是否有一种好方法可以将文本 block 强制到屏幕的一 Angular ？

Answer 1

这可能有点棘手的原因是因为父节点有一些默认设置。

在 Reveal 的初始化中将宽度和高度设置为 100%:

Reveal.initialize({
    width: "100%",
    height:"100%"
});

确保幻灯片(即部分)使用整个空间:

.full {
    height:100%;
    width:100%;  
}

最后设置标题的位置:

.caption {
     bottom:0px;
     right:0px;
     position:absolute;
}

full code