如何在Quarto+reveal.js演示文稿标题幻灯片左上角添加小Logo

方法1：自定义标题幻灯片内容（YAML+HTML） #

直接通过YAML配置和自定义HTML结构覆盖默认标题幻灯片，精准控制Logo位置：

---
title: "演示文稿标题"
author: "作者名称"
format: revealjs
---

::: {.title-slide}
<!-- 左上角Logo定位 -->
<div style="position: absolute; top: 20px; left: 20px;">
  <img src="your-logo-path.png" width="100">
</div>
# 演示文稿标题
## 副标题（可选）
### 作者名 | 日期
:::

• 替换your-logo-path.png为你的Logo实际路径（支持相对/绝对路径）
• 调整top/left控制Logo与边缘的距离，width设置Logo尺寸

方法2：自定义CSS全局控制 #

通过CSS伪元素给标题幻灯片添加Logo，无需修改标题结构：

1. 在Quarto文档YAML中引入自定义CSS：

---
title: "演示文稿标题"
author: "作者名称"
format: revealjs
css: custom-style.css
---

2. 同目录下创建custom-style.css，写入以下样式：

/* 仅针对标题幻灯片的左上角Logo */
.reveal .title-slide::before {
  content: url('your-logo-path.png');
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100px;
  height: auto;
}

• 同样替换Logo路径，按需调整位置和尺寸参数

关键注意点 #

• 确保Logo路径正确，若放在images子目录，路径写./images/your-logo.png即可
• 若演示文稿有深色背景，可给Logo添加filter: invert(1)样式适配

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