如何为Quarto RevealJS幻灯片文本列添加背景色

实现思路 #

给左侧列容器添加自定义类，通过CSS控制背景色和高度，让背景框不随文本长度变化，保持固定尺寸。

方案1：固定像素高度的背景框 #

首先在文档开头插入自定义样式：

<style>
.bg-fixed-column {
  background-color: #f5f5f5; /* 替换为你需要的背景色 */
  min-height: 450px; /* 固定背景框高度，可按需调整 */
  padding: 1.2rem; /* 内边距避免文本贴边 */
  border-radius: 6px; /* 可选：添加圆角优化视觉效果 */
}
</style>

修改幻灯片列代码：

## Title

:::: {.columns}
::: {.column width="30%" .bg-fixed-column}

* Point 1
* Point 2
* Point 3

:::
::: {.column width="70%"}

![图片替代文本](你的图片URL)

:::
::::

方案2：背景高度与右侧列同步 #

如果希望左侧背景框高度和右侧图片/列完全一致，使用以下样式：

<style>
.columns {
  height: 100%; /* 让列容器占满可用高度 */
}
.bg-full-column {
  background-color: #e8f4f8; /* 自定义背景色 */
  height: 100%;
  padding: 1.2rem;
  border-radius: 6px;
}
</style>

对应列代码：

## Title

:::: {.columns}
::: {.column width="30%" .bg-full-column}

* Point 1
* Point 2
* Point 3

:::
::: {.column width="70%"}

![图片替代文本](你的图片URL)

:::
::::

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