css - 在 ioslides 演示文稿的标题页中添加图像

Question

是否可以将图像添加到 ioslides 演示文稿的标题页？我想在 xyz 之后添加一个大徽标。

---
title: "Empowering Data-Driven Decisions at <br> xyz"
author: Omayma Said
date: Jan 11, 2017
output: ioslides_presentation
---

Answer 1

是的，在 css 的帮助下是可能的。

第一步是在markdown的输出中添加css：

---
title: "Your <br> Title"
author: "Author Name"
date: "<div class = 'slide-date'>`r format(Sys.Date(),format='%B %Y')` <div>"
output:
  ioslides_presentation:
    css: styles.css
---

下一步是将图像添加到您的 styles.css 文件中

slides>slide.title-slide {
    background-image: url('title_image.png');
    background-size: 100% 100%;
}

快乐编码！

Answer 2

是的。有一个标准选项可以包含ioslides bookdown 文档中包含的小徽标，以及一些使用 css 制作自定义大小图像的代码。这个 css 可以放在单独的文档中，也可以放在文档开头的 YAML 标头之后，当您只需要添加几行时，这通常更容易。

这是使用bookdown 文档中的代码片段将 css 放入文档的示例。

---
output:
  ioslides_presentation:
    logo: logo.png
---

<script>

    .gdbar img {
        width: 300px !important;
        height: 150px !important;
        margin: 8px 8px;
    }

    .gdbar {
        width: 400px !important;
        height: 170px !important;
    }

    slides > slide:not(.nobackground):before {
        width: 150px;
        height: 75px;
        background-size: 150px 75px;
    }

</script>

# Transition slide

## First slide