如何在Rmarkdown（xaringan）标题幻灯片添加图片并设置位置

方案1：CSS背景图方式 #

直接在你的my-theme.css中为标题幻灯片添加背景图样式，同时精准控制位置：

1. 先将校徽图片（比如命名为school-logo.png）放到演示文稿目录下的images文件夹（没有就新建一个）
2. 修改my-theme.css，新增或调整.title-slide的样式：

.title-slide {
  /* 引入校徽图片，路径根据实际存放位置调整 */
  background-image: url("images/school-logo.png");
  /* 禁止图片重复显示 */
  background-repeat: no-repeat;
  /* 控制位置：示例为右下角，可替换为其他值 */
  background-position: 95% 95%;
  /* 设置图片大小，避免变形 */
  background-size: 140px auto;
}

• 位置参数说明：
  • background-position: left top：左上角
  • background-position: right bottom：右下角
  • background-position: center center：居中
  • 也支持像素值，比如background-position: 30px 40px（左移30px，下移40px）

方案2：直接插入定位图片 #

如果想更灵活控制，可在标题幻灯片的markdown代码末尾添加带定位样式的图片：

--- 
title: "My presentations"
author: "My name"
date: "`r Sys.Date()`" 
output:
  xaringan::moon_reader:
    chakra: libs/remark-latest.min.js
    css: [xaringan-themer.css, my-theme.css]
    nature:
      countIncrementalSlides: false
      titleSlideClass: ["left", "middle", "inverse"]
      highlightLines: true
      highlightStyle: solarized-dark
    includes:
      in_header: header.html
---

<!-- 校徽定位：右上角，宽120px -->
<img src="images/school-logo.png" style="position: absolute; top: 20px; right: 20px; width: 120px;"/>

• 修改top/right/left/bottom参数可自由调整位置，width控制图片尺寸

关键注意点 #

• 确保图片路径正确，优先用相对路径，避免跨设备路径问题
• 调整图片大小时，用auto作为高度值（比如background-size: 140px auto）可保持校徽比例不变
• 如果用CSS方案，检查my-theme.css中原有.title-slide样式是否冲突，必要时合并属性

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