《图解HTML练习》- video标签实现视频背景

简介: 《图解HTML练习》- video标签实现视频背景

最近见有的网站背景用的是视频,看起来很高大上的样子,自己也尝试一把,直接上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:设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

2.png

目录
相关文章
|
3天前
|
前端开发
HTML+CSS练习小项目——百叶窗
HTML+CSS练习小项目——百叶窗
|
10天前
|
存储 JavaScript 前端开发
HTML标签data-属性的作用
HTML标签data-属性的作用
|
10天前
|
移动开发 HTML5 前端开发
【网页搭建基石】:揭秘HTML标签的魔法世界
【网页搭建基石】:揭秘HTML标签的魔法世界
|
18天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
22 1
|
18天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
29 1
|
6天前
|
JavaScript 前端开发 定位技术
html中a标签的多用性
html中a标签的多用性
|
6天前
|
前端开发 JavaScript
HTML的a标签如何做返回顶部的功能
HTML的a标签如何做返回顶部的功能
13 0
|
6天前
|
移动开发 定位技术 HTML5
HTML5的新语义化标签
HTML5的新语义化标签
|
11天前
|
Python
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记2)
|
11天前
|
Python
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记)
Python基础教程(第3版)中文版 第20章 项目1: 自动添加标签(纯文本转HTML格式) (笔记)