r - 使用 CSS 和 Quarto/reveal.js 更改幻灯片背景

Question

我正在编写一个 .scss 文件，以使用四开来为 Reveal.js 幻灯片设置主题，但不知道如何设置一类幻灯片的背景。

我想创建一个带有(例如)红色背景的幻灯片类，我可以使用(例如)##幻灯片标题{.redslide}

目前我的 .scss 文件包括:

.redslide {
  background-color: red;
}

这会将幻灯片内容的 div 的背景更改为红色，但不是整个背景。

我可以使用(例如)逐张更改背景

## 幻灯片标题 {data-background-color=red}

这会更改整个幻灯片的背景，并适本地将文本颜色更改为白色，但尝试在 css 文件中设置 data-background-color 不起作用。

是否可以使用 CSS 设置幻灯片背景，或者是否有更好的方法使用 quarto/reveal.js 来实现此目的？

Answer 1

关键是添加 !important，然后这两种方法为我提供相同的结果。

.qmd

title: "Title Slide"
format: 
   revealjs:
     theme: [style.scss]
---



## Slide {background-color="#447099"}


## Slide Background {.test-background}

styles.scss

/*-- scss:defaults --*/


.test-background {
    background-color: #447099 !important;
}