我有一个ioslides演示文稿,我在RStudio中创建和渲染。 上周演示文稿正确呈现,每个人都很高兴。但现在我有一个问题。我通过修改默认的css样式模板在右上角的每张幻灯片上添加了一个图像。更准确地说,我改变了后续选择器:
/* line 62, ../scss/default.scss */
slides > slide {
display: none;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 26px;
color: #797979;
width: 900px;
height: 700px;
margin-left: -450px;
margin-top: -350px;
padding: 40px 60px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
background-image: url(Images/logodue.png) !important;
background-size: 200px !important;
background-repeat: no-repeat !important;
background-position: 93.1% 4% !important;
}
我在最后添加了四个背景属性。请注意,我使用相对路径添加了背景图像,并使用了* .png文件。 然后我只在我的YAML标题中包含CSS模板:
---
title: "My Presentation"
csl: mee.csl
output:
ioslides_presentation:
css: dueCSS.css
widescreen: yes
bibliography: references.bib
---
由于某种原因,不显示此图像。我在演示文稿文件中添加的图像经过编码和显示没有问题。只是样式表中的徽标不会。当我检查输出HTML幻灯片的源代码时,样式表被正确包含,图像似乎也被编码:
slides > slide {
display: none;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 26px;
color: #797979;
.......
.......
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
background-image: data:image/png;base64,iVBORw0KGgoAAAANSUhEUg....AND SO ON
我已尝试使用Chrome和Firefox打开它,但它们都没有显示徽标。有没有人有想法?
编辑:确实显示了某些内容。但它不是标志。它看起来像这样(幻灯片右上角的屏幕截图):
编辑2:进一步的调查表明,样式表也被编码并包含在最终的HTML文件中,如下所示:
<link href="data:text/css;charset=utf-8,%40charset%20%22UTF%2D8%22%3B%0<!-- rest of the base64 code -->" rel="stylesheet" type="text/css" />
如果我将其更改为&#34; real&#34;样式表工作正常:
<link href="dueCSS.css" rel="stylesheet" type="text/css" />
因此我猜错误必须在编织程序中?