将徽标添加到标题幻灯片

Question

如何在标题幻灯片的顶部正确添加徽标？

经过反复试验，我想出了这个添加到 css 文件中的方法。

.title-slide.remark-slide-content:before{
  position: absolute;
  content:url(logo.svg);
  height:60px;
}

这似乎适用于一个徽标，它位于右上角。我也想在左上角添加另一个徽标。有没有更好的方法来做到这一点？

Answer 1

一种方法是使用带有一些 div 的 seal: false 创建自定义标题幻灯片。

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
date: "2016/12/12"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true 
      countIncrementalSlides: false
    seal: false
---

<div class="my-logo-left"></div>

<div class="my-logo-right"></div> 

# hello

---

CSS

.my-logo-left {
content: "";
    position: absolute;
    top: 15px;
    left:   20px;
    height: 40px;
    width: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(https://www.r-project.org/logo/Rlogo.png);
}

.my-logo-right {
content: "";
    position: absolute;
    top: 15px;
    right:   8px;
    height: 40px;
    width: 120px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(https://www.r-project.org/logo/Rlogo.png);
}