使用reveal.js将标题幻灯片图像添加到RMarkdown幻灯片

时间:2016-04-21 18:29:10

标签: rstudio knitr r-markdown reveal.js

我正在尝试弄清楚如何使用reveal.js幻灯片在标题幻灯片中包含居中的背景图像,同时在RMarkdown la http://rmarkdown.rstudio.com/revealjs_presentation_format.html

中书写

我的测试平台如下

---
title: "Attempt"
css: style.css
output: revealjs::revealjs_presentation
---

## Will this work

- Did the title slide have an image?

style.css

.title {
    background-image: url(http://img1.wikia.nocookie.net/__cb20100706023807/familyguy/images/c/c7/Tauntaun.png);
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    }

注意,.title是唯一能在标题幻灯片上显示任何图像的内容。我已经根据我在SO和其他地方看到的内容尝试了一些其他组合。

.section .reveal .state-background基于Rstudio 0.98.1028 add background image only to title slide

.title-slide基于Adding an image to title slide using slidify

这些都不起作用。我错过了什么吗?也许我遗漏了一个神奇的YAML选项?

1 个答案:

答案 0 :(得分:5)

好的,这是一个简单的答案。基本上,制作一个空白标题,然后在标题幻灯片上将图像作为数据背景。你也可以在标题幻灯片上做任何你想做的事情。我使用div在幻灯片中间放了一个漂亮的大标题。

---
title: 
output: revealjs::revealjs_presentation
---

## {data-background="http://img1.wikia.nocookie.net/__cb20100706023807/familyguy/images/c/c7/Tauntaun.png"}