如何在xaringan标题幻灯片同时添加Logo与背景图片？

你可以通过在CSS的background-image属性中同时指定多张图片的方式，实现标题页背景图与Logo共存的效果，具体修改如下：

现有配置回顾 #

你的当前YAML配置：

---
output:
  xaringan::moon_reader:
    css: ["xaringan-themer.css","mi_estilo.css"]
    lib_dir: libs
    nature:
      titleSlideClass: ["left", "bottom"]
      ratio: '16:9'
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

现有CSS代码：

/* Add image and change bg color */
.title-slide {
  background-image: url(logo-ean-blanco.png);
  background-position: 11% 15%;
  background-size: 200px;
  padding-left: 100px;  
}

修改后的CSS代码 #

将mi_estilo.css中的.title-slide样式修改为：

/* 同时添加标题页背景图和Logo */
.title-slide {
  /* 顺序：背景图在前，Logo在后（后者会叠加在前者上方） */
  background-image: url(你的背景图片路径.png), url(logo-ean-blanco.png);
  /* 对应图片的位置：背景图居中，Logo保持原位置 */
  background-position: center center, 11% 15%;
  /* 对应图片的尺寸：背景图铺满页面，Logo保持原尺寸 */
  background-size: cover, 200px;
  /* 确保两张图片都不重复平铺 */
  background-repeat: no-repeat, no-repeat;
  padding-left: 100px;  
}

关键说明 #

• 多张背景图用逗号分隔，后声明的图片层级更高（会显示在前面的图片之上），所以把Logo放在背景图后面，保证Logo可见
• background-position、background-size、background-repeat属性也用逗号分隔，每个值对应前面图片的顺序
• 使用cover作为背景图的尺寸值，可让背景图自适应幻灯片的16:9比例，完全铺满标题页
• 保留你原有的Logo位置、尺寸和内边距设置，维持原有布局

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