HTML视频背景(动态背景)-526互联

　　网页动态背景一般是用视频实现的，能增添网页的感染力，我觉得很好看，也不难，不妨学一下。

先加入下面一串代码：

 1  <style>
 2         video{  
 3                 height: 100%;
 4                 width: 100%;
 5                 position: absolute;  
 6                 right: 0px;  
 7                 bottom: 0px;  
 8                 z-index:-1;
 9      }  
10     </style>

z-index的值只要小于0就行，毕竟视频是要作为背景的。

下面代码是引入素材：

1 <body>
2     <video src="./example.mp4"   <!--素材路径-->
3     style="width: 100%;height: 100%;object-fit:cover;position:absolute;top: 0;left: 0;" autoplay="autoplay" loop="loop" muted="muted"></video>
4 </body>

介绍一下<video>可选属性:

<video>可选属性(菜鸟教程提供)
属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	如果出现该属性，视频的音频输出为静音。
poster	URL	规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload	auto metadata none	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

下面是完整代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <style>
 4      video{  
 5              height: 100%;
 6              width: 100%;
 7              position: absolute;  
 8              right: 0px;  
 9              bottom: 0px;  
10              z-index:-1;
11      　　　　}  
12     </style>
13 <head>
14     <meta charset="UTF-8">
15     <meta name="viewport" content="width=device-width, initial-scale=1.0">
16     <title>动态背景</title>
17 </head>
18 <body>
19     <video src="./example.mp4" <!--素材背景-->
20     style="width: 100%;height: 100%;object-fit:cover;position:absolute;top: 0;left: 0;" autoplay="autoplay" loop="loop" muted="muted"></video>
21 <p><li style="text-align: left;font-family: KaiTi;font-size: larger;color: rgba(0, 255, 42, 0.984);">夏天的飞鸟，飞到我窗前唱歌，又飞去了。
22         <br>秋天的黄叶，它们没有什么可唱，只叹息一声，飞落在那里。<br>Stray birds of summer come to my window to sing and fly away.
23 </body>
24 </html>

展示实际效果：

具体学习HTML建议到菜鸟教程：HTML 教程 | 菜鸟教程 (runoob.com)