如何在Quarto/reveal.js中用CSS设置自定义类幻灯片背景？

核心原因 #

你之前的SCSS写法只修改了幻灯片内容容器的背景，是因为.redslide类默认被应用在幻灯片的内容div上，而非Reveal.js用来承载全屏幻灯片的<section>标签——真正控制全屏背景的正是这个<section>元素。

正确的CSS/SCSS写法 #

直接定位到带有.redslide类的<section>标签，设置背景和文本颜色，完全模拟data-background-color的自动效果：

/* 给带redslide类的全屏幻灯片设置红色背景 */
.reveal .slides section.redslide {
  background-color: red;
  /* 确保背景覆盖整个幻灯片区域 */
  background-size: cover;
  background-position: center;
}

/* 统一设置幻灯片内所有文本为白色（匹配data属性的自动文字变色逻辑） */
.reveal .slides section.redslide * {
  color: white !important;
}

如果检查后发现.redslide类确实是加在内容容器而非<section>上，就调整选择器为：

/* 当类在内容div上时，选择其父级section元素 */
.reveal .slides section:has(.slide-content.redslide) {
  background-color: red;
}

.reveal .slides section:has(.slide-content.redslide) * {
  color: white !important;
}

验证类的应用位置 #

可以打开幻灯片的开发者工具（F12），查看对应幻灯片的HTML结构：

• 若结构是<section class="redslide">，用第一种写法
• 若结构是<div class="slide-content redslide">，用第二种写法

补充说明 #

data-background-color之所以能生效，是因为Reveal.js会读取这个属性，自动给<section>设置全屏背景，同时对比背景色调整文本颜色。用CSS实现时，需要手动完成这两步设置，但胜在可以通过类批量复用样式，无需逐张写属性。

内容的提问来源于stack exchange，提问作者George Savva