Quarto reveal.js标题幻灯片自定义背景设置方法咨询

直接在根级YAML写background-*属性时，Quarto仅会自动将background-image透传给标题幻灯片，background-color、background-opacity等同类属性不会被绑定到标题幻灯片渲染规则，因此无法生效。不需要使用属性留空的非正规hack，以下是官方支持的稳定实现方式：

方案1：通过title-slide-attributes配置（推荐，无额外文件） #

Quarto 1.2及以上版本原生提供标题幻灯片属性注入入口，所有普通幻灯片支持的背景属性都可以通过该字段配置，效果和普通幻灯片背景完全一致，自动覆盖整个幻灯片区域：

---
title: "My title"
format: 
  revealjs:
    theme: [default]
    logo: images/logo_black.png
    title-slide-attributes:
      data-background-image: "背景图本地路径或在线地址"
      data-background-opacity: 0.45
      data-background-color: "#202124" # 配置纯色背景直接填该字段
editor: visual
---

注意：字段名需要带data-前缀，和reveal.js原生幻灯片背景属性规则一致，无需额外写SCSS即可生效。

方案2：SCSS定向覆盖（适合复杂定制场景） #

如果需要结合自定义主题做更复杂的样式控制，可以直接在自定义SCSS文件中针对标题幻灯片的独立背景层写规则，避免内容层遮挡：

/* 自定义SCSS主题文件内编写 */
#title-slide .slide-background {
  background-color: #202124 !important;
  background-image: url('背景图路径') !important;
  background-size: cover !important;
  background-position: center !important;
  background-opacity: 0.45 !important;
}

不要直接给#title-slide节点本身设置背景：reveal.js的幻灯片背景是独立于内容层渲染在.slide-background节点下的，直接给父节点设置背景会被内容层默认底色遮挡，出现覆盖不全的问题。

注意事项 #

属性留空的hack方案本质是绕过Quarto对标题幻灯片的默认渲染逻辑，版本升级时存在兼容风险，优先选择上述两种官方支持的实现方式。

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