时间戳

首页 > 解决方案 > 我可以使用 css 为 xaringan 模板的每张幻灯片添加徽标吗？

xaringan - 我可以使用 css 为 xaringan 模板的每张幻灯片添加徽标吗？

问题描述

我想调整此处提供的 .css 文件，以便在每张幻灯片的右上角包含一个小徽标，但标题、反面和最后一张幻灯片除外。理想情况下，我可以在 .css 文件中添加一些简单的内容，而不是手动编写演示文稿的每张幻灯片。

我试着添加这个

background-image: url(https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png);
  background-position: 9% 15%;
  background-size: 55px;

至

.remark-slide-content {
  padding-left: 100px;  /* delete this for 4:3 aspect ratio */
}

要得到

.remark-slide-content {
background-image: url(https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png);
  background-position: 9% 15%;
  background-size: 55px;
  padding-left: 100px;  /* delete this for 4:3 aspect ratio */
}

图像显示在所有幻灯片上，包括标题和过渡。它甚至覆盖了 .title-slide 图像。

标签： xaringan

解决方案

您可以执行以下操作来排除title-slide：

.remark-slide-content:not(.title-slide){
  background-image: url(https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png);
  background-position: 9% 15%;
  background-size: 55px;
  padding-left: 100px;  /* delete this for 4:3 aspect ratio */
}

但这样做的缺点是，如果您在其他幻灯片中有背景图像，它将覆盖上面的图像。因此，您可能还想定义另一个类，例如exclude：

.remark-slide-content:not(.exclude){
  background-image: url(https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png);
  background-position: 9% 15%;
  background-size: 55px;
  padding-left: 100px;  /* delete this for 4:3 aspect ratio */
}

.logopos {
  position: absolute;
  top: 9%;
  left: 15%;
}

对于您对另一个背景图像有问题的相应幻灯片，请禁用它并手动添加它。例如

class: exclude 
background-image: url("bla")

content

<img class="logopos" src="https://github.com/jvcasillas/ru_xaringan/raw/master/img/logo/ru_shield.png">

推荐阅读