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中将一块文本强制到屏幕的一角？

Answer 1

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

在初始化Reveal：

时将宽度和高度设置为100％

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

确保幻灯片（即section）使用整个空间：

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

最后设置标题的位置：

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

full code

Answer 2

您能提供包含类.reveal的HTML的示例吗？将position:absolute添加到您的选择器规则中。如果您希望标题与每张幻灯片的底角齐平，最好将位置设置为bottom:0px而不是top。

例如：

<style type="text/css">
.reveal .reveal_section {
    position: relative;
}
.reveal .caption {
    position: absolute; 
    bottom: 0px;
    left: 50px;
}
.reveal .caption a {
    background: #FFF;
    color: #666;
    padding: 10px; 
    border: 1px dashed #999;
}
</style>
<div class="reveal">
<section class="reveal_section" data-background="latimes.png">
    <small class="caption">[Some Text](http://a.link.com/whatever)</small>
    <aside class="notes">some notes</aside>
</section>
</div>

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

2 个答案: