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

先加入下面一串代码：

 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)

HTML视频背景(动态背景)的更多相关文章

  1. JavaScript之动态背景登陆表单

    <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. duilib修复ActiveXUI控件bug，以支持flash透明动态背景

    转载请说明原出处,谢谢~~ 昨天在QQ控件里和同学说起QQ2013登陆窗体的开发,从界面角度考虑,单单一个登陆界面是很容易做出来的.腾讯公司为了 防止各种盗号行为可谓煞费苦心,QQ2013采用了动态背 ...

  3. 桌面应用开发之WPF动态背景

      因为项目需要,在WPF开发的桌面应用中,登陆页面需使用动态背景.由于没有前端开发人员,所以由半吊子的后端开发人员根据效果图写前端xaml.去掉页面上边框,抽离动态背景设置代码: <Windo ...

  4. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  5. [Canvas]动态背景

    欲查看动态效果请点击下载代码再用Chrome或Firefox打开index.html 图例: 代码: <!DOCTYPE html> <html lang="utf-8&q ...

  6. 如何利用h5将视频设置为背景

    我们常常有着将视频作为网页背景的需要,但是在设置时也经常差强人意,今天设置了一下,可以基本达到要求了,可能有些小细节做的不是太好,希望指出来,一起进步 第一步:准备工作 工欲善其事必先利其器,我们首先 ...

  7. css3 动态背景

    动态背景 利用多层背景的交替淡入淡出,实现一种背景在不停变换的效果,先看图. 效果图: DEMO地址 步骤 1.利用css的radial-gradient创建一个镜像渐变的背景.当中的80% 20%为 ...

  8. 查找索引/ie滤镜/动态背景/属性attr和prop

    1. 查找索引 查找当前元素在指定范围内的索引序号,示例: $('.right_newestState_con').find('em').index($(this)); 2. ie滤镜 利用ie的私有 ...

  9. WEB前端动态背景集

    本资源是我在源代码网站上发现的,内附几十种背景动态特效,我单独提取出来精品背景特效在此分享,文件里有20多种精品动态效果,本人觉得可用作于个人博客主页背景,登陆页面背景等,有20多个背景特效,非常漂亮 ...

  10. HTML5将<video>视频设置为页面动态背景

    <!DOCTYPE html><html><head> <title>Operation Aborted Example</title> & ...

随机推荐

  1. SpringMVC请求转发和重定向测试

    保存视图解析器的请求转发和重定向测试 1.web.xml模板文件(略) 2.springmvc配置文件 <?xml version="1.0" encoding=" ...

  2. ABP - 依赖注入(2)

    依赖注入的使用 构造方法注入 这是将服务注入类的最常用方法,是将依赖项注入类的首选方式,也是微软推崇的模式.这样,除非提供了所有构造方法注入的依赖项,否则无法构造类,显示的声明了类必需的服务,使开发人 ...

  3. 癌症中克隆种群结构统计推断分析软件PyClone安装小记

    由于微信不允许外部链接,你需要点击文章尾部左下角的 "阅读原文",才能访问文中链接. PyClone 是一种用于推断癌症中克隆种群结构的统计模型. 它是一种贝叶斯聚类方法,用于将深 ...

  4. C#/VB.NET:快速而简单的免费SVG到PDF转换技巧

    在日常工作中,我们常常需要将SVG转换为PDF格式.这是因为SVG格式的图像在打印时可能会出现问题,例如失去分辨率或无法正确适应纸张大小.与此相比,PDF格式则专门用于打印和共享文档,可以确保高质量输 ...

  5. 【接口测试】Postman（三）-变量与集合

    变量与集合 ​ 在Postman中,我们进行接口测试一般是以集合为单位,而在日常应用中,我们会经常使用到变量.下面我们将介绍一下变量和集合的一些用法. 文章目录导航: 目录 变量与集合 一.变量 1. ...

  6. 基于OLAP技术的企业级大数据分析平台的国际化发展与合作

    目录 标题:<基于OLAP技术的企业级大数据分析平台的国际化发展与合作> 背景介绍 随着全球化的不断推进,企业对大数据分析的需求日益增长.企业通过数据分析来发现隐藏在业务数据中的机会,从而 ...

  7. Python运维开发之路《数据类型》

    一. python数据类型 python的五大基本数据类型,数字.字符串.列表.元组.字典;其他数据类型,类型type.Null.文件.集合.函数/方法.类.模块. 1.数字 1 ①整型 2 十进制转 ...

  8. PostgreSQL 性能优化: EXPLAIN 使用教程

    使用 EXPLAIN EXPLAIN基础 代价估计 启动开销 总开销 计划结点输出行数 计划结点输出行宽 执行统计 实际启动开销 实际总开销 实际输出行数 实际执行次数 I/O统计 共享块命中数 共享 ...

  9. 使用Githud 实现分发IPA包遇到的坑

    最近要用到测试包分发,首先想到了,蒲公英,但是把包扔上去,扫描下载的时候发现,现在需要用户登录才能下载,弃了. 又跑到fir ,发现还得实名才能用,还得上传各种证件照,而且好像每天只有10个下载量,. ...

  10. 【Spring boot】 @Value注解

    一.不通过配置文件的注入属性 1.1 注入普通字符串 直接附在属性名上,在 Bean 初始化时,会赋初始值 @Value("normal") private String norm ...