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

先加入下面一串代码：

 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. 【操作日志】如何在一个SpringBoot+Mybatis的项目中设计一个自定义ChangeLog记录？

    设计一个业务改动信息时的自定义记录,例如新增.修改.删除数据等.并且记录的规则可以通过配置的方式控制.大家需要根据各自业务场景参考,欢迎讨论.伪代码如下: 实体类: @TableName(" ...

  2. MySQL之常用函数介绍

    一:函数的简介 函数可以把我们经常使用的代码封装起来,需要的时候直接调用即可.这样既提高了代码效率,又提高了可维护性.在SQL中我们也可以使用函数对检索出来的数据进行函数操作.使用这些函数,可以极大地 ...

  3. 使用ptrace将标准输出重定位到文件

    首先使用PTRACE_SYSCALL获取到系统调用号,如果是write则将文件描述符从标准输出变为我们打开的文件 #include <stdio.h> #include <fcntl ...

  4. 手把手实践丨基于STM32+华为云设计的智慧烟感系统

    摘要:当前基于STM32和华为云,设计了一种智慧烟感系统,该系统可以检测烟雾,同时将检测到的数据上传到云端进行处理和分析. 本文分享自华为云社区<基于STM32+华为云设计的智慧烟感系统> ...

  5. shell学习总结

    shell教程 第一个shell脚本 打开文本编辑器(可以使用 vi/vim 命令来创建文件), 新建一个文件 test.sh,扩展名为 sh(sh代表shell) #!/bin/bash echo ...

  6. uniapp主题切换功能的第二种实现方式（scss变量+require）

    在上一篇 "uniapp主题切换功能的第一种实现方式(scss变量+vuex)" 中介绍了第一种如何切换主题,但我们总结出一些不好的地方,例如扩展性不强,维护起来也困难等等,那么接 ...

  7. 揭秘Spring依赖注入和SpEL表达式

    摘要:在本文中,我们深入探讨了Spring框架中的属性注入技术,包括setter注入.构造器注入.注解式属性注入,以及使用SpEL表达式进行属性注入. 本文分享自华为云社区<Spring高手之路 ...

  8. uni-app简单通用Request网络请求 支持请求成功 失败回调

    uni-app简单通用Request网络请求 支持请求成功 失败回调; 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12794 ...

  9. PostgreSQL 12 文档: 部分 V. 服务器编程

    部分 V. 服务器编程 这部分关于使用用户定义的函数.数据类型.触发器等扩展服务器功能.这些是高级主题,读者应该在理解了有关PostgreSQL的所有其他用户文档之后才阅读这些主题.这一部分的后面一些 ...

  10. Net 编译器平台--- Roslyn Scripting APIs

    引言 上一篇中.Net 编译器平台 --- Roslyn,介绍了Roslyn的各项功能,包括公开API,使用语法,使用语义,使用工作区等功能. 那么回到上一篇中提到的问题,实现类似这样的功能(以下代码 ...