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

【问题标题】：Change Title Slide Color in reval.js R Markdown presentation在 reval.js R Markdown 演示文稿中更改标题幻灯片颜色
【发布时间】：2018-10-15 15:59:12
【问题描述】：

我正在尝试更改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}

【问题讨论】：

总是举一个简单的例子，因为它让人们更容易提供帮助:) 我已经编辑了这个问题，以包括一个供您将来参考
这对迈克尔很有帮助，谢谢

标签： css r rstudio r-markdown reveal.js

【解决方案1】：

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

所以试试

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

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

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

【讨论】：

工作就像一个魅力。对于像我这样缺乏 CSS 经验的人，我应该注意，不需要 <style> 标签，事实上它只有在我删除它时才对我有用。

【解决方案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 ## 之间的过渡会简单地显示图像/背景。

【讨论】：