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

Question

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

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

这是一个最小的示例：

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

# Change Background {data-background=#ff0000}

Answer 1

如果您查看演示文稿的DOM（HTML结构），就会意识到，幻灯片的背景是作为单独的div元素创建的。 其中第一个定义标题幻灯片的背景：

因此请尝试

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

此CSS选择器选择类.slide-background的元素，它是其父元素的第一个子元素（这里的父元素是类backgrounds的div元素）。

（请注意，如果直接在RMD中添加CSS，则会生成一张空的幻灯片。因此，应通过YAML标头将其包括在内。）

Answer 2

对我来说，这导致颜色应用于所有级别 1 标题，例如#

看看 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;
}

尽管如此，标题 1 # 和 2 ## 之间的过渡会简短地显示图像/背景。