我正在尝试弄清楚如何使用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选项?
答案 0 :(得分:5)
好的,这是一个简单的答案。基本上,制作一个空白标题,然后在标题幻灯片上将图像作为数据背景。你也可以在标题幻灯片上做任何你想做的事情。我使用div在幻灯片中间放了一个漂亮的大标题。
---
title:
output: revealjs::revealjs_presentation
---
## {data-background="http://img1.wikia.nocookie.net/__cb20100706023807/familyguy/images/c/c7/Tauntaun.png"}