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

先加入下面一串代码：

 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. postman接口关联-token值

    背景: 在测试工作中,测试鉴权的接口需要用到登录接口的token,需要我们先调用登录接口,获得token,然后把即时获得的token填入请求中发送请求,我们可以用设置全局变量的办法解决这个问题   实 ...

  2. 生信入门必须掌握的 30 个 Linux 命令

    学习生物信息,Linux 是必须掌握的内容,其实常用的 Linux 命令也就 30 个左右,而且这些命令都是单词的简写,记忆起来并不困难.这里列出了常用的 30 个命令. 1. cd Change d ...

  3. 强化学习从基础到进阶-常见问题和面试必知必答[1]：强化学习概述、序列决策、动作空间定义、策略价值函数、探索与利用、Gym强化学习实验

    强化学习从基础到进阶-常见问题和面试必知必答[1]:强化学习概述.序列决策.动作空间定义.策略价值函数.探索与利用.Gym强化学习实验 1.强化学习核心概念 强化学习(reinforcement le ...

  4. AI与健康管理：趋势与未来

    目录 引言 随着人工智能技术的不断发展,健康管理也逐渐成为了一个新的研究领域.AI技术可以为健康管理提供智能化.个性化.高效的支持,使得健康管理更加人性化和科学.本文将介绍AI与健康管理的技术原理.实 ...

  5. Kubernetes(k8s)服务账号Service Accounts

    目录 一.系统环境 二.前言 三.服务账号Service Accounts简介 四.用户账号与服务账号区别 五.服务账号(Service Accounts) 5.1 创建服务账号(Service Ac ...

  6. XMLSpy操作手册

    最新发布的XMLSpy会让XML代码的处理更容易,还会有助于这个产品成为最主要的XML编辑器.xmlspy是符合行业标准的XML开发环境,专门用于设计,编辑和调试企业级的应用程序,包括XML, XML ...

  7. LRU 力扣 146 https://leetcode.cn/problems/lru-cache/

    一道经典题目,用双向链表去做能够满足O1的复杂度 核心代码如下 class LRUCache {    MyLinkedList myLinkedList;    int size;    int c ...

  8. 如何洞察 .NET程序 非托管句柄泄露

    一:背景 1. 讲故事 很多朋友可能会有疑问,C# 是一门托管语言,怎么可能会有非托管句柄泄露呢? 其实一旦 C# 程序与 C++ 语言交互之后,往往就会被后者拖入非托管泥潭,让我们这些调试者被迫探究 ...

  9. Android实时获取摄像头画面传输至PC端

    前言 最近在做一个PC端小应用,需要获取摄像头画面,但是电脑摄像头像素太低,而且位置调整不方便,又不想为此单独买个摄像头.于是想起了之前淘汰掉的手机,成像质量还是杠杠的,能不能把手机摄像头连接到电脑上 ...

  10. 即构SDK12月迭代：新增多项质量回调，互动白板、云录制SDK同步更新

    即构SDK12月迭代来啦,本月LiveRoom/AudioRoom SDK新增了端到端延迟质量回调.房间会话ID信息,便于在音视频通话.直播场景中进行时延.通话质量的评测.同时还优化了硬件设备权限变更 ...