Xaringan 中的图像占位符
Image placeholder in Xaringan
我在 R
中使用易慧的 xaringan
库来创建演示文稿的自定义模板。
其中一部分是创建自定义 body
幻灯片,如下图所示。
然后我将自定义 CSS
用于 headers 和 body:
.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无知,但我才刚刚开始涉足这方面。
您可以为 body-yellow
class 设置全局背景图像,并在特定幻灯片上用 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
我在 R
中使用易慧的 xaringan
库来创建演示文稿的自定义模板。
其中一部分是创建自定义 body
幻灯片,如下图所示。
然后我将自定义 CSS
用于 headers 和 body:
.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无知,但我才刚刚开始涉足这方面。
您可以为 body-yellow
class 设置全局背景图像,并在特定幻灯片上用 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