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

时间:2014-03-21 18:47:10

标签: html css slidify

我一直在努力使用' 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文件中添加它的位置?

干杯,

2 个答案:

答案 0 :(得分:13)

如果是一次性幻灯片,您尝试添加背景,则以下内容将起作用

--- #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>

答案 1 :(得分:1)

嗯,另一种将图像作为背景的方法:

作为本地文件(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