我可以使用CSS向xaringan模板的每张幻灯片添加徽标吗?

时间:2019-01-30 22:52:02

标签: xaringan

我想修改here提供的.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图片。

2 个答案:

答案 0 :(得分:2)

您可以执行以下操作以排除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">

答案 1 :(得分:1)

最近,我遇到了Garrick Aden-Buie的软件包xaringanExtra,请参阅https://pkg.garrickadenbuie.com/xaringanExtra/。许多有用的功能,包括非常简单的徽标处理选项。您只需添加一个块

```{r xaringan-logo, echo=FALSE}
xaringanExtra::use_logo(
image_url = <fill in your path> )
```

仅此而已。