幻灯片背景
¥Slide Backgrounds
幻灯片默认包含在屏幕的有限区域内，以使其能够适应任何显示器并均匀缩放。你可以通过在 <section> 元素中添加 data-background 属性，在幻灯片区域外应用整页背景。支持四种不同类型的背景：color、image、video 和 iframe。
¥Slides are contained within a limited portion of the screen by default to allow them to fit any display and scale uniformly. You can apply full page backgrounds outside of the slide area by adding a data-background attribute to your <section> elements. Four different types of backgrounds are supported: color, image, video and iframe.
颜色背景
¥Color Backgrounds
支持所有 CSS 颜色格式，包括十六进制值、关键字、rgba() 或 hsl()。
¥All CSS color formats are supported, including hex values, keywords, rgba() or hsl().
<section data-background-color="aquamarine">
<h2>🍦</h2>
</section>
<section data-background-color="rgb(70, 70, 255)">
<h2>🍰</h2>
</section>渐变背景
¥Gradient Backgrounds
支持所有 CSS 渐变格式，包括 linear-gradient、radial-gradient 和 conic-gradient。
¥All CSS gradient formats are supported, including linear-gradient, radial-gradient and 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>图片背景
¥Image Backgrounds
默认情况下，背景图片会调整大小以覆盖整个页面。可用选项：
¥By default, background images are resized to cover the full page. Available options:
| 属性 | 默认 | 描述 |
|---|---|---|
| data-background-image | 要显示的图片的 URL。幻灯片打开时，GIF 会重新启动。 | |
| data-background-size | cover | 请参阅 MDN 上的 background-size。 |
| data-background-position | center | 请参阅 MDN 上的 background-position。 |
| data-background-repeat | no-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>视频背景
¥Video Backgrounds
在幻灯片后自动播放全尺寸视频。
¥Automatically plays a full size video behind the slide.
| 属性 | 默认 | 描述 |
|---|---|---|
| data-background-video | 单个视频源，或以逗号分隔的视频源列表。 | |
| data-background-video-loop | false | 标记视频是否应重复播放。 |
| data-background-video-muted | false | 标记是否应静音。 |
| data-background-size | cover | 使用 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 背景
¥Iframe Backgrounds
嵌入网页作为幻灯片背景，覆盖 reveal.js 100% 的宽度和高度。iframe 位于背景层，位于幻灯片后面，因此默认情况下无法与其交互。要使背景具有交互性，你可以添加 data-background-interactive 属性。
¥Embeds a web page as a slide background that covers 100% of the reveal.js width and height. The iframe is in the background layer, behind your slides, and as such it's not possible to interact with it by default. To make your background interactive, you can add the data-background-interactive attribute.
| 属性 | 默认 | 描述 |
|---|---|---|
| data-background-iframe | 要加载的 iframe 的 URL | |
| data-background-interactive | false | 包含此属性可与 iframe 内容进行交互。启用此选项将阻止与幻灯片内容的交互。 |
<section data-background-iframe="https://slides.com"
data-background-interactive>
<h2>Iframe</h2>
</section>iframe 在可见时会被延迟加载。如果你希望提前预加载 iframe，可以将 data-preload 属性附加到幻灯片 <section>。你还可以使用 preloadIframes 配置选项全局启用所有 iframe 的预加载。
¥Iframes are lazy-loaded when they become visible. If you'd like to preload iframes ahead of time, you can append a data-preload attribute to the slide <section>. You can also enable preloading globally for all iframes using the preloadIframes configuration option.
背景过渡
¥Background Transitions
默认情况下，我们将使用淡入淡出在幻灯片背景之间进行过渡。这可以使用 backgroundTransition 配置选项进行更改。
¥We'll use a cross fade to transition between slide backgrounds by default. This can be changed using the backgroundTransition config option.
视差背景
¥Parallax Background
如果你想使用视差滚动背景，请在初始化 reveal.js 时设置以下前两个属性（后两个是可选的）。
¥If you want to use a parallax scrolling background, set the first two properties below when initializing reveal.js (the other two are optional).
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
});确保背景尺寸远大于屏幕尺寸，以便进行滚动。查看示例。
¥Make sure that the background size is much bigger than screen size to allow for some scrolling. View example.