最近见有的网站背景用的是视频,看起来很高大上的样子,自己也尝试一把,直接上demo~额~这里的Hello World文字貌似放的不是地方,但是就这样子吧,实现一下功能,之后考虑加到自己的网站中~
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
video{
position: fixed;
right: 0px;
bottom: 0px;
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
z-index:-11
}
source{
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
}
</style>
</head>
<body>
<!-- autoplay: 自动播放, loop:循环, muted: 静音 -->
<video id="v1" autoplay loop muted>
<source src="./hello.mp4" type="video/mp4" />
</video>
<h1 style="text-align: center; color: red;">Hello World</h1>
</body>
</html>
```
示例中,需要掌握的知识点:
* html5的video标签的使用, 见下表:
* z-index:设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。