如何在reveal.js中定位背景图像

Question

我想在一个reveal.js演示文稿的幻灯片右侧有一个背景图像。

我像这样把图片添加到幻灯片中:

 <section data-background="myImage.jpg">
  // content
 </section>

如何添加css样式使其出现在屏幕的右边缘?

Answer 1

本文帮助找到了解决方案。您可以使用

为当前部分的html元素添加样式。

data-state="something"

，当然你可以用这个样式来调整你的css。所以我用了这个html:

<section data-background="myImage.jpg" data-state="img-right">
    // content
</section>

和以下css:

html.img-right div.slide-background.present {
    background-position: right;
}

Answer 2

基于"new"的解决方案，在css文件中可以包含这样的内容，修改大小和位置值将使其适应幻灯片的正确大小和位置。

body {
  background-image: url(image1.png),url(image2.png), url(image3.png), url(image4.png);
  background-size: 15%, 15%, 15%, 15%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 95% 96%, 95% 3%, 3% 3%, 3% 95%;
}