使用 quarto 的显示实现在标题幻灯片中自定义背景答案

【问题标题】：Custom background in title-slide using quarto's reveal implementation使用 quarto 的显示实现在标题幻灯片中自定义背景
【发布时间】：2022-07-07 15:11:32
【问题描述】：

我正在使用 quarto 的reveal.js 实现。我一直在看official documentation page on customising themes，对SCSS规则比较熟悉。

我已经能够为幻灯片创建类，然后通过 SCSS 规则对其进行自定义。遗憾的是，我无法在覆盖整个区域的第一张幻灯片 (#title-slide) 中添加自定义背景（颜色或理想情况下的图像背景），就像在 here 所述的其他常规幻灯片中所做的那样.

除了this hack consisting of leaving the presentation's attributes blank之外，还有什么方法可以为第一张幻灯片添加自定义背景？

编辑：

不确定这是否是正确的方法，但我尝试在 yaml 元数据中添加背景图像 url 并且它有效：


---
title: "My title"
background-image: "https://images.unsplash.com/flagged/photo-1580139624070-910f651c1b78?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80"
background-opacity: "0.45"
format: 
  revealjs:
    theme: [default]
    logo: images/logo_black.png
editor: visual
---

很遗憾，background-color 和 background-opacity 等属性不起作用。

【问题讨论】：

使用background-image 是一个好方法。 pandoc 手册中的documented（大部分）也适用于四开。
非常感谢您指点我！按照文档，我使它工作并且我也设法应用了其他属性！

标签： quarto

【解决方案1】：

为了记录，在@tarleb 的评论将我指向pandoc's documentation 之后，我通过在 yaml 的元数据中添加它来使其工作：

---
[...]
title-slide-attributes:
    data-background-image: "/path/to/image"
    data-background-size: contain
    data-background-opacity: "number"
[...]
---

可以看出，其他属性都可以传递，只要

它们在title-slide-attributes下缩进
它们前面带有data-

【讨论】：