2015-12-04 5 views
2

Я хочу добавить полноэкранное фоновое изображение на один или несколько слайдов в моей слайд-панели R Presentation (Rpres), созданной с помощью Rstudio. Я понимаю, что слайды RStudio R Presentation используют раму opens.js, чтобы получить все приятные эффекты для глазных конфет, и ближе всего к достижению того, что я хочу, следуя приведенному здесь примеру: https://www.uvm.edu/rsenr/vtcfwru/R/fledglings/14_Slideshows.html и добавив следующую строку перед началом слайда:Как добавить полноэкранное фоновое изображение в Rpres (R Presentation) слайды?

--- &slidebg bg:url(atlas.png);background-size:cover 
### Introduction: about this talk 

Blah blah blah... 

Однако, хотя я вижу образ, это не по центру а изображение охватывает только доступную область текста - то есть, изображение кажется, быть обрезано и есть большие поля, окружающие изображение. Если бы был способ центрировать изображение и удалять поля вокруг изображения, у меня было бы то, что я хочу. Я бы предпочел не взломать html после того, как написал файл Rpres. Кроме того, я бы предпочел не перекодировать мои слайды в html - мне нравится создавать слайды в уценке в Rstudio.

Я попробовать следующие советы здесь: Rpresentation in Rstudio - Make image fill out the whole screen частности, комментарий об использовании http://github.com/regisb/reveal.js-fullscreen-img, но я не мог получить эту работу - либо предложенное решение не очень хорошо играть с Rpres файлов или информации в README было недостаточно для того, чтобы я мог взломать кудряк, чтобы заставить его работать.

Это похоже на очень простой запрос. Неужели что-то такое же простое, как добавление фонового изображения на слайд, не может быть так сложно? Любые идеи, пожалуйста?

ответ

1

После другого ответа от здесь: Rstudio 0.98.1028 add background image only to title slide

вы можете иметь пользовательский файл CSS, содержащий изображение в качестве фона. Давайте назовем его CSS-file.css:

<style> 
/* Your other css */ 
    body { 
     background-image: url(http://goo.gl/yJFbG4); 
     background-position: center center; 
     background-attachment: fixed; 
     background-repeat: no-repeat; 
     background-size: 100% 100%; 
    } 
.section .reveal .state-background { 
    background-image: url(http://goo.gl/yJFbG4); 
    background-position: center center; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
} 
</style> 

Вы можете включить, что в начале файла .Rpres:

test 
======================================================== 
author: 
date: 
css:css-file.css 

Это должно дать вам фоновое изображение на титульном листе, и с несколько изменений, на следующие страницы.

HTH!

+1

Спасибо! Но пока ничего не сделано. Я попробовал то, что вы предложили, но кажется, что css-file.css переопределяется другими вещами. Я получил лучшие результаты, когда вставил код после YAML и до моего первого слайда. Я не понимаю, почему мне нужно указывать информацию фонового изображения в двух разных блоках. Первое кажется достаточным. Однако, в любом случае, единственное, что я могу достичь, - сделать изображение фоном для ** всех ** слайдов, включая слайд заголовка. Я бы хотел большего контроля; Я хочу только изображение на слайде заголовка и, возможно, разные фоны на других слайдах. –

+0

Я должен упомянуть, что блок '.section .reveal .state-background', похоже, не имеет никакого эффекта. Я могу изменить свойства 'body' глобально, но не для отдельных слайдов. –