如何修改Quarto演示文稿首页幻灯片？添加标题文本框优化可读性

1. 修正YAML配置 #

调整标题、副标题的语法，并设置合适的背景透明度：

---
title: "`Predictive Models`"
subtitle: !expr paste("Last update:", format(Sys.time(), '%d %B, %Y'))
title-slide-attributes:
    data-background-image: "https://github.com/rhozon/datasets/raw/master/capa_ppt_Felipe.png"
    data-background-size: contain
    data-background-opacity: 0.7  # 平衡背景展示与文本可读性的透明度值
format:
  revealjs:
    slide-number: true
    chalkboard: 
      buttons: true
    preview-links: auto
    css: styles.css
    footer: "https://www.brf-global.com/"
---

• 用!expr在YAML中正确插入R生成的动态日期，避免语法错误
• data-background-opacity设为0.7，既保留背景图的视觉效果，又不会遮盖文本

2. 自定义CSS样式（styles.css） #

在同目录的styles.css文件中添加以下样式，给标题区域添加半透明文本框：

方案一：标题、副标题各自独立文本框 #

/* 标题文本框样式 */
.reveal .title-slide .title {
  background-color: rgba(255, 255, 255, 0.9); /* 白色半透明背景 */
  padding: 1rem 2rem; /* 内边距，增加文本与边框的距离 */
  border-radius: 8px; /* 圆角优化视觉效果 */
  display: inline-block; /* 背景仅包裹文本内容，不占满整行 */
}

/* 副标题文本框样式 */
.reveal .title-slide .subtitle {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  display: inline-block;
}

方案二：标题+副标题共用一个文本框 #

如果想要更统一的视觉效果，让标题和副标题放在同一个文本框内：

.reveal .title-slide .title-wrapper {
  background-color: rgba(0, 0, 0, 0.8); /* 黑色半透明背景 */
  color: #ffffff; /* 白色文本，与深色背景形成强对比 */
  padding: 2rem 3rem;
  border-radius: 10px;
  display: inline-block;
}

效果说明 #

通过上述CSS设置，标题和副标题会被半透明文本框包裹，无论背景图颜色深浅，都能保证文本清晰可读。你可以根据背景图的色调调整background-color的颜色和透明度（rgba第四个值，范围0-1），以及内边距、圆角等参数，适配自己的视觉需求。

内容的提问来源于stack exchange，提问作者Rodrigo H. Ozon