返回 reveal.js
backgrounds.html
根目录 / examples / backgrounds.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8" />
5
6 <title>reveal.js - Slide Backgrounds</title>
7
8 <meta
9 name="viewport"
10 content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
11 />
12
13 <link rel="stylesheet" href="../dist/reveal.css" />
14 <link rel="stylesheet" href="../dist/theme/serif.css" id="theme" />
15 <style type="text/css" media="screen">
16 .slides section.has-dark-background,
17 .slides section.has-dark-background h2 {
18 color: #fff;
19 }
20 .slides section.has-light-background,
21 .slides section.has-light-background h2 {
22 color: #222;
23 }
24 </style>
25 </head>
26
27 <body>
28 <div class="reveal">
29 <div class="slides">
30 <section data-background="#00ffff">
31 <h2>data-background: #00ffff</h2>
32 </section>
33
34 <section data-background="#bb00bb">
35 <h2>data-background: #bb00bb</h2>
36 </section>
37
38 <section data-background-color="lightblue">
39 <h2>data-background: lightblue</h2>
40 </section>
41
42 <section>
43 <section data-background="#ff0000">
44 <h2>data-background: #ff0000</h2>
45 </section>
46 <section data-background="rgba(0, 0, 0, 0.2)">
47 <h2>data-background: rgba(0, 0, 0, 0.2)</h2>
48 </section>
49 <section data-background="salmon">
50 <h2>data-background: salmon</h2>
51 </section>
52 </section>
53
54 <section data-background="rgba(0, 100, 100, 0.2)">
55 <section>
56 <h2>Background applied to stack</h2>
57 </section>
58 <section>
59 <h2>Background applied to stack</h2>
60 </section>
61 <section data-background="rgb(66, 66, 66)">
62 <h2>Background applied to slide inside of stack</h2>
63 </section>
64 </section>
65
66 <section data-background-transition="slide" data-background="assets/image1.png">
67 <h2>Background image</h2>
68 </section>
69
70 <section>
71 <section data-background-transition="slide" data-background="assets/image1.png">
72 <h2>Background image</h2>
73 </section>
74 <section data-background-transition="slide" data-background="assets/image1.png">
75 <h2>Background image</h2>
76 </section>
77 </section>
78
79 <section
80 data-background="assets/image2.png"
81 data-background-size="100px"
82 data-background-repeat="repeat"
83 data-background-color="#111"
84 >
85 <h2>Background image</h2>
86 <pre>
87 data-background-size="100px" data-background-repeat="repeat" data-background-color="#111"</pre
88 >
89 </section>
90
91 <section data-background="#888888">
92 <h2>Same background twice (1/2)</h2>
93 </section>
94 <section data-background="#888888">
95 <h2>Same background twice (2/2)</h2>
96 </section>
97
98 <section data-background-video="https://static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://static.slid.es/site/homepage/v1/homepage-video-editor.webm">
99 <h2>Video background</h2>
100 </section>
101
102 <section
103 data-background-iframe="https://slides.com/news/make-better-presentations/embed?style=hidden&autoSlide=4000"
104 >
105 <h2>Iframe background</h2>
106 </section>
107
108 <section>
109 <section data-background="#417203">
110 <h2>Same background twice vertical (1/2)</h2>
111 </section>
112 <section data-background="#417203">
113 <h2>Same background twice vertical (2/2)</h2>
114 </section>
115 </section>
116
117 <section data-background="#934f4d">
118 <h2>Same background from horizontal to vertical (1/3)</h2>
119 </section>
120 <section>
121 <section data-background="#934f4d">
122 <h2>Same background from horizontal to vertical (2/3)</h2>
123 </section>
124 <section data-background="#934f4d">
125 <h2>Same background from horizontal to vertical (3/3)</h2>
126 </section>
127 </section>
128 </div>
129 </div>
130
131 <script src="../dist/reveal.js"></script>
132 <script>
133 // Full list of configuration options:
134 // https://revealjs.revealjs.com/config/
135 Reveal.initialize({
136 center: true,
137
138 transition: 'linear',
139 // transitionSpeed: 'slow',
140 // backgroundTransition: 'slide'
141 });
142 </script>
143 </body>
144 </html>
145
145 lines HTML