RMarkdown IO 幻灯片演示不再支持 css 文件中的背景图片

Question

创建带有图像背景的幻灯片 - 代码

就在几周前，我在创建 RMarkdown 文件时能够在 RStudio 中成功执行以下操作。

Rmarkdown 文件(顶部 YAML 部分):

output:
  ioslides_presentation:
    css: ../css/slide_style.css
    logo: ../css/logos/approved.Logos.016.jpg
    self_contained: yes

这将获取 css 文件 slide_style.css ，其中包括以下内容:

/* Below is the code to drop in a nice image for the background OUTSIDE of the slides. */
/* line 58, ../scss/default.scss */
/* line 236 of ../theme/../default.css */

body {
    background-image: url('../css/backgrounds/outside_slides.png');
}


/* Below is the code to drop in a nice image for the slide backgrounds, or "backdrop". */
/* line 170, ../scss/default.scss */
/* line 320 of ../theme/../default.css */

slides > slide.backdrop {
    background-image: url('../css/backgrounds/inside_slide.png');
}

这曾经工作，其中 inside_slide.png文件将作为背景图像(重复)嵌入幻灯片本身， outside_slides.png文件将类似地嵌入，但围绕中央幻灯片的外边缘。

嵌入图像不再有效 - 我试过......

css 文件的其余部分工作正常。我有很好的效果，恕我直言，改变标题所在的位置，允许标题级别，改变表格的外观等。所有这些仍然正常工作。图像本身没有被嵌入。明确， outside_slides.png和 inside_slides.png图像不再在生成的 .html 中呈现文件。

正在检查文件路径...

因此，您可能会猜测文件本身就是问题所在。我检查了文件路径，一切都很好。事实上，我故意把它搞砸了，以确保它会失败。当路径错误时，它失败了。

自己打开文件...

也许文件没有我认为的内容？不，我可以使用预览或其他方式检查文件，它们看起来不错。我还指出了其他图像文件，它们也不能被视为背景。我试过 .png , .jpg , 和 .gif .没运气。

确保 css 文件可以执行其他操作...

也许有什么东西覆盖了这个 body 标签？我尝试了一些简单的方法，例如 background-color: orange; ，而且效果很好。我改变了不透明度，这奏效了。我也尝试添加 !important到 css 表。那没有帮助。 (意思是，它适用于背景颜色，但不适用于背景图像。)

就好像有什么东西是压倒一切的，以至于 background-image根本行不通。

我一直在使用 RStudio 进行大部分测试。既不是在 RStudio 中生成的演示文稿，也不是生成的 .html ，通过网络浏览器打开，显示图像。

有谁知道发生了什么？

编辑

这是我的 session 信息:

> sessionInfo()
R version 3.1.3 (2015-03-09)
Platform: x86_64-apple-darwin13.4.0 (64-bit)
Running under: OS X 10.10.4 (Yosemite)

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

loaded via a namespace (and not attached):
[1] digest_0.6.8     htmltools_0.2.6  rmarkdown_0.7.3  rsconnect_0.3.79 tools_3.1.3      yaml_2.1.13     

Answer 1

由于您没有提供任何代码，我可以给您一个提示，我将如何调试它:调出开发人员工具，在大多数浏览器中它将是 F12。现在

单击放大镜图标以选择应具有 background-image 的元素。套装

打开“样式”选项卡以检查是否有内容覆盖了您的 background-image (将显示为删除文本)

也许你可以用这种方式证明/反驳你的“压倒一切”的假设。

祝你好运!