幻灯片背景
默认情况下，幻灯片包含在屏幕的一小部分区域内，以便它们适合任何显示器并统一缩放。您可以在幻灯片区域之外应用全页背景，方法是向 <section> 元素添加 data-background 属性。支持四种不同类型的背景：颜色、图像、视频和 iframe。
颜色背景
支持所有 CSS 颜色格式，包括十六进制值、关键字、rgba() 或 hsl()。
<section data-background-color="aquamarine">
<h2>🍦</h2>
</section>
<section data-background-color="rgb(70, 70, 255)">
<h2>🍰</h2>
</section>渐变背景
支持所有 CSS 渐变格式，包括 linear-gradient、radial-gradient 和 conic-gradient。
<section data-background-gradient="linear-gradient(to bottom, #283b95, #17b2c3)">
<h2>🐟</h2>
</section>
<section data-background-gradient="radial-gradient(#283b95, #17b2c3)">
<h2>🐳</h2>
</section>图像背景
默认情况下，背景图像的大小调整为覆盖整个页面。可用选项
| 属性 | 默认 | 说明 |
|---|---|---|
| data-background-image | 要显示的图像的 URL。幻灯片打开时 GIF 会重新开始。 | |
| data-background-size | 覆盖 | 在 MDN 上查看 background-size。 |
| data-background-position | 中心 | 在 MDN 上查看 background-position。 |
| data-background-repeat | 不重复 | 在 MDN 上查看 background-repeat。 |
| data-background-opacity | 1 | 0-1 范围内背景图像的不透明度。0 是透明，1 是完全不透明。 |
<section data-background-image="http://example.com/image.png">
<h2>Image</h2>
</section>
<section data-background-image="http://example.com/image.png"
data-background-size="100px" data-background-repeat="repeat">
<h2>This background image will be sized to 100px and repeated</h2>
</section>视频背景
在幻灯片后方自动播放全尺寸视频。
| 属性 | 默认 | 说明 |
|---|---|---|
| data-background-video | 单个视频来源，或以逗号分隔的视频来源列表。 | |
| data-background-video-loop | false | 标志着视频是否应当重复播放。 |
| data-background-video-muted | false | 标志着音频是否应当静音。 |
| data-background-size | 覆盖 | 对于全屏和一些裁剪，使用 cover；对于带黑边的信箱格式，使用 contain。 |
| data-background-opacity | 1 | 0-1 范围内背景视频的不透明度。0 是透明，1 是完全不透明。 |
<section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4"
data-background-video-loop data-background-video-muted>
<h2>Video</h2>
</section>Iframe 背景
将网页嵌入为幻灯片背景，覆盖 reveal.js 100% 的宽度和高度。Iframe 位于背景层，在你的幻灯片后方，因此默认情况下无法与其进行交互。要使背景具有交互性，你可以添加 data-background-interactive 属性。
| 属性 | 默认 | 说明 |
|---|---|---|
| data-background-iframe | 要加载的 ifram 的 URL | |
| data-background-interactive | false | 包含此属性可以对 iframe 内容进行交互。启用此功能会阻止与幻灯片内容进行交互。 |
<section data-background-iframe="https://slides.com"
data-background-interactive>
<h2>Iframe</h2>
</section>Iframe 在可见时会延迟加载。如果你希望提前预加载 iframe，你可以向幻灯片 <section> 添加 data-preload 属性。你还可以使用 preloadIframes 配置选项为所有 iframe 启用全局预加载。
背景过渡
默认情况下，我们将在幻灯片背景之间使用交叉淡化为过渡。这可以使用 backgroundTransition 配置选项进行更改。
视差背景
如果你想使用视差滚动背景，在初始化 reveal.js 时设置以下前两个属性（另外两个是可选的）。
Reveal.initialize({
// Parallax background image
parallaxBackgroundImage: '', // e.g. "https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg"
// Parallax background size
parallaxBackgroundSize: '', // CSS syntax, e.g. "2100px 900px" - currently only pixels are supported (don't use % or auto)
// Number of pixels to move the parallax background per slide
// - Calculated automatically unless specified
// - Set to 0 to disable movement along an axis
parallaxBackgroundHorizontal: 200,
parallaxBackgroundVertical: 50
});确保背景大小远大于屏幕大小以允许一些滚动。 查看示例。
