在 reval.js R Markdown 演示文稿中更改标题幻灯片颜色

Question

我正在尝试更改 reveal.js R Markdown 演示文稿的标题幻灯片的颜色。

我知道我应该使用带有 css: styles.css 选项的自定义 CSS sheet，但我找不到任何关于如何具体更改标题幻灯片的参考资料。我可以将任何其他幻灯片的颜色更改为 explained here。

这是一个最小的例子：

---
title: "Habits"
author: John Doe
date: March 22, 2005
output: revealjs::revealjs_presentation
---

# Change Background {data-background=#ff0000}

Answer 1

如果您检查演示文稿的 DOM（HTML 结构），您会发现幻灯片的背景是按照 dividual div 创建的元素。其中第一个定义了标题幻灯片的背景：

因此尝试

<style>
.slide-background:first-child {
  background-color: #00FF00;
}
</style>

这个 CSS 选择器选择带有 class .slide-background 的元素，这是其 parent 的第一个 child（这里是 parent是 div 元素 class backgrounds).

（请注意，如果您直接在 RMD 中添加 CSS，则会生成一张空幻灯片。因此您应该通过 YAML header 包含它们。）

Answer 2

对我来说，这导致颜色被应用到所有级别 1 headers，例如#

查看 DOM，我发现无法仅使用 CSS 定位标题幻灯片。

有效的是添加以下内容CSS：

/* Set background for all headers 1 # slides */

.slide-background:first-child {
  background-color: orange;
  background-image: url(image.jpg);
}

/* Set background for all headers 1 # slides accept title slide, back to template default */

.slide-background > .present {
  background-color: white;
  background-image: none;
}

不过，header 1 # 和 2 ## 之间的过渡显示了图像/背景。

在 reval.js R Markdown 演示文稿中更改标题幻灯片颜色

Change Title Slide Color in reval.js R Markdown presentation

css

r

rstudio

r-markdown

reveal.js