Slidify -如何自定义幻灯片背景？

Question

我一直在努力使用“slidify”包来自定义我的幻灯片的背景。

实际上，我可以通过修改文件'slidify.css‘来对标题幻灯片执行此操作：

.title-slide {
/*background-color: #CBE7A5 */; /* #EDE0CF; ; #CA9F9D*/
background-image:url(C:/path/mypng.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
 }

然而，我找不到如何为“标准”幻灯片做这件事。我可以用

--- bg:url(C:/path/mypng.png)  

直接在我的.Rmd文件中，但我无法添加重复和大小选项。

有没有人有关于如何在CSS文件中添加它/在哪里添加它的提示？

干杯,

Answer 1

如果这是一个一次性的幻灯片，你试图添加一个背景，那么下面的方法将会起作用

--- #custbg

## Slide with custom background

<style>
#custbg {
  background-image:url(C:/path/mypng.png); 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
</style>

如果你有多张幻灯片，你想要这样一个自定义的背景，那么你可以利用模板。因此，重写幻灯片如下所示

--- &custbg bg:"C:/path/mypng.png"

## Slide with custom background

然后创建一个名为custbg.html的布局，并将其放在assets/layouts文件夹中，slidify将自动从该文件夹中选取布局。以下是对发生的事情的简短解释。custbg.html布局继承自父布局slide.html。您在{{{和}}}之间看到的所有内容都是一个占位符，将由slidify填充。{{{ slide.html }}}包含原始幻灯片内容。我们通过使用id属性将动态样式附加到此内容。请注意，此布局仅允许用户在幻灯片中指定bg。如果需要，您还可以自定义其他样式属性。布局方法的优点是您可以允许多张幻灯片利用自定义背景。

---
layout: slide
---

{{{ slide.html }}}

<style>
#{{{ slide.id }}} {
  background-image:url({{{ slide.bg }}}); 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
</style>

Answer 2

好吧，另一种获取图像作为背景的方法：

作为本地文件(index.html的同一文件夹中的图像)：

--- .class1 #id1 bg:url(picture.png)
## Slide with custom background
content slide

作为本地文件(在图像文件夹中，仅适用于路径assets/img)：

--- .class1 #id1 bg:url(assets/img/picture.png)
## Slide with custom background
content slide

来自互联网

--- .class1 #id1 bg:url(http://placekitten.com/600/375)
## Slide with custom background
content slide

如果图像较小，我们可以看到许多图像试图覆盖所有幻灯片。另一方面，如果图像很大，我们只能看到图像的一部分作为幻灯片背景。我认为，有一种方法可以称为回补期权。在我的例子中，我调整了图像的大小以跳过这个问题。

注意事项：

测试的浏览器: Mozila Firefox和Google Chrome。

框架: io2012