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

先加入下面一串代码：

 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. flutter apk启动闪退问题

    今发布一个flutter apk 安装后启动时老是闪退,经过一遍又一遍查找,发现是指定了so的问题 看多次点击启动 一.比对打包后的apk 在出现该问题后也搜索了不少资料,参考过 https://bl ...

  2. CSharp初体验

    入门 初来乍到了解一门新的语言,它可能和熟悉的c/c++有不小差别,整体上需要首先了解下语法文件的整体结构.例如,源文件整体结构如何. 乍看CSharp源文件(compile unit)的结构,官网主 ...

  3. vivo 帐号服务稳定性建设之路-平台产品系列06

    作者:vivo 互联网平台产品研发团队- Shi Jianhua.Sun Song 帐号是一个核心的基础服务,对于基础服务而言稳定性就是生命线.在这篇文章中,将与大家分享我们在帐号稳定性建设方面的经验 ...

  4. 归并排序Java版（图文并茂思路分析）

    归并排序 工作原理: 工作原理是将一个大问题分解成小问题,再将小问题分解成更小的.(乍一看就觉得是像一个递归)就像下图这样.然后不断的将其一份为二,分解成更小的排序. 我们设一个函数叫MergeSor ...

  5. 手写RPC框架之泛化调用

    一.背景 前段时间了解了泛化调用这个玩意儿,又想到自己之前写过一个RPC框架(参考<手写一个RPC框架>),于是便想小试牛刀. 二.泛化调用简介 什么是泛化调用 泛化调用就是在不依赖服务方 ...

  6. Codeforces Round #877 (Div. 2) A-E

    A 代码 #include <bits/stdc++.h> using namespace std; using ll = long long; bool solve() { int n; ...

  7. 盘点！国内隐私计算学者在 USENIX Security 2023 顶会上的成果

    USENIX Security 是国际公认的网络安全与隐私计算领域的四大顶级学术会议之一.CCF(中国计算机学会) 推荐的 A 类会议. 每年的 USENIX Security 研讨会都会汇集大量研究 ...

  8. Maven-Could not calculate build plan错误解决方法

    报错如图: 报错情况: 可以创建简单的maven项目例子,但是无法创建web的maven项目 解决方法: 1.安装maven插件后,c盘下会生成.m2文件夹 .m2\repository\org\ap ...

  9. 基于ClickHouse解决活动海量数据问题

    1.背景 魔笛活动平台要记录每个活动的用户行为数据,帮助客服.运营.产品.研发等快速处理客诉.解决线上问题并进行相关数据分析和报警.可以预见到需要存储和分析海量数据,预估至少几十亿甚至上百亿的数据量, ...

  10. 偷师MapStruct

    转自自己的qq空间 2022年10月26日 一个项目看三遍 每遍都有新发现 嘿嘿嘿 我是代码小偷