核心思路：

  • 页面插入视频，使用video标签，设置自动播放，循环播放 预加载 声音
  • 给该viedo设置定位，绝对定位，viedeo父元素宽高为100%，相对定位
  • video视频宽高为100%，此时充满屏幕
  • 需要在视频背景上面的元素，同样设置定位，添加z-index值大于视频即可

示例代码：

<!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: 0;
            padding: 0;
        }

        .box {
            width: 100%;
            height: 700px;
            background-color: rgb(230, 134, 134);
            position: relative;
        }

        video {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            z-index: 3;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- autoplay 自动播放  loop循环播放  muted 声音 preload 预加载 -->
        <video autoplay loop muted="" preload>
            <source src="./source_mp4/ac23980df61144595b41f03bd515b0ad.mp4">
        </video>
        <div> hahah</div>
    </div>

</body>

</html>

效果图：

在这里插入图片描述

# html
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

数仓安全：数据脱敏技术深度解析

avatar 华为云开发者联盟
cover

详解Python 中可视化数据分析工作流程

avatar 华为云开发者联盟
cover

带你了解GaussDB SQL中的BOOLEAN表达式

avatar 华为云开发者联盟