Question

我希望在reveal.js演示文稿的一张幻灯片的右侧有一张背景图片。

我将图像添加到幻灯片中：

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

如何添加css样式以使其显示在屏幕的右边缘？

Answer 1

This article helped to find the solution。您可以使用

为当前部分的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

基于“新”解决方案，在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%;
}

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

2 个答案: