如何在Quarto中创建带横幅标题的Reveal.js幻灯片？

你当前直接设置h2背景色的方式无法让背景延伸到幻灯片边缘，核心原因是Reveal.js的幻灯片内容容器默认带有内边距，标题元素被限制在容器内部。可以通过以下自定义SCSS实现标题横幅覆盖幻灯片左右及顶部边缘的效果：

修改后的SCSS代码 #

/*-- scss:rules --*/

.reveal .slide-content {
  // 保留内容区域内边距，避免正文贴边
  padding-top: 80px;
}

.reveal h2 {
  color: white !important;
  background-color: dimgrey !important;
  // 清除标题默认外边距
  margin: 0;
  // 固定在幻灯片顶部，撑满左右边缘
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  // 设置内边距保证标题文本位置和原生标题一致
  padding: 0.5em 1em;
}

对应Quarto文档示例 #

---
format: 
  revealjs:
    theme: custom.scss
---

## Slide with banner title

实现效果：
- 标题保留原有显示位置
- 灰色背景矩形延伸至幻灯片左右及顶部边缘

关键说明 #

• 用position: absolute配合left:0/right:0让标题背景直接撑满幻灯片左右边缘
• 调整.slide-content的padding-top，避免正文内容被标题横幅遮挡
• 通过内边距控制标题文本的排版，和原生标题的视觉位置保持一致

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