2

我正在使用xaringanYihui 的库R为演示文稿创建自定义模板。

其中一部分是创建自定义body幻灯片,如下图所示。

在此处输入图像描述

CSS然后我对标题和正文使用自定义:

  .body-yellow > h2 {
      font-size: 42px;
      text-transform: uppercase;
      padding-left: 
}

然后只需输入rmarkdown以下内容:

---
class: body-yellow

# Hello

## world

Hello world

然后填充幻灯片。

我的问题是,有没有办法为上面模板中显示的图像创建一个占位符,我可以在 rmarkdown 代码本身中进行调整?

我想像这样的代码:

---
class: body-yellow
background-images: url(./img/my_new_custom_image.png)

# Hello

## world

Hello world

以及相关调整CSS

 .body-yellow > image {
    background-images: PLACEHOLDER
    position:right
    }

这将改变图像如下:

在此处输入图像描述

请原谅我对CSS的无知,但我才刚刚开始涉足这个领域。

4

1 回答 1

5

您可以为类设置全局背景图像,并使用特定幻灯片上body-yellow的属性覆盖它。background-image这是一个最小的例子:

---
title: "Test"
output:
  xaringan::moon_reader:
    nature:
      ratio: "16:9"
---

class: body-yellow

```{css, echo=FALSE}
 .body-yellow > h2 {
  font-size: 42px;
  text-transform: uppercase;
  padding-left: 50px;
}
.body-yellow {
  background-image: url(https://i.stack.imgur.com/OSrg8t.png);
  background-size: contain;
}
```


## Default background

---
class: body-yellow
background-image: url(https://i.stack.imgur.com/X1C2Bt.png)

## A custom background

使用自定义背景覆盖默认值

于 2019-02-21T18:07:01.643 回答