我可以在Reveal.js的右下角放置一個標題嗎？

我有一個使用了大量的背景圖像的Reveal.js幻燈片：我可以在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中的屏幕角落？

來源

2014-05-08 Amanda

我可以在'.reveal .caption' - 'margin-top：700px; margin-right：1000px;'或多或少在我的屏幕上工作。但是這似乎打破了。 – Amanda

您能提供一個具有.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>

來源

2014-05-08 13:38:52 shecodes

添加了示例HTML和更好的CSS。它似乎沒有任何效果。 – Amanda

您需要通過將其樣式設置爲'position：relative'來使父容器相對於自身。 – shecodes

通過「父容器」你是指......哪個？這部分？ – Amanda

，這可能是一個有點棘手的原因是因爲父節點有一些默認設置。

設置寬度和高度爲100％在初始化Reveal：

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

確保滑動（即section。）使用的整個空間：

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

和最終設定的位置標題：

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

full code

來源

2016-04-18 19:33:09

我可以在Reveal.js的右下角放置一個標題嗎？

回答

相關問題