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

【问题标题】：Slidify - how to customize a slide background?Slidify - 如何自定义幻灯片背景？
【发布时间】：2014-04-29 07:32:36
【问题描述】：

我一直在努力使用“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 文件中添加它的提示？

干杯，

【问题讨论】：

请删除r标签。

标签： html css slidify

【解决方案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>

【讨论】：

使用这个解决方案会导致我有重复的标题。

【解决方案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

如果图像尺寸很小，我们可以看到许多图像试图覆盖整个幻灯片。另一方面，如果图像很大，我们只能看到图像的一部分作为幻灯片背景。我认为，有一种方法可以调用封面选项。好吧，就我而言，我调整图像大小以跳过问题。

注意事项：

经过测试的浏览器：Mozilla Firefox 和 Google Chrome。

框架：io2012

【讨论】：