网页设置动态背景

最新推荐文章于 2024-07-23 18:00:00 发布

Java百事通

最新推荐文章于 2024-07-23 18:00:00 发布

阅读量649

点赞数

分类专栏：经验文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_57254446/article/details/131411176

版权

经验专栏收录该内容

3 篇文章

订阅专栏

该文章介绍了如何利用CSS的相对定位和绝对定位来设置背景视频并放置其他内容。通过绝对定位，视频作为背景不占用文档流，而相对定位的模块则浮在视频之上，形成内容叠加的效果。示例代码展示了一个包含自动播放背景视频和表单输入的页面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用CSS的相对定位和绝对定位来实现，所谓的相对定位和绝对定位是相对于原有文档流（也就是从左向右，从上到下）来说的，相对定位也就是在原有位置改变位置后原有位置不让出来，而绝对定位则是要把原有位置让出来。记忆可以这样，绝对就是真的改变位置了，所以要把位置让出来；相对就是没有真正改变位置，一个萝卜占了两个坑，所以不把位置让出来。
首先通过绝对定位导入背景视频以便不占用位置，不占用位置的原因是它把自己原有的位置让出来了，这样所有新元素都会从它的原有位置开始占用文档流，从而使得这个视频起到了背景的作用。
在这里插入图片描述

之后再通过相对定位导入需要的模块，这样这些模块就会浮在整个绝对定位的视频之上，因为它们占用了之前绝对定位的视频的位置，也就是整个视频由于绝对定位不占用空间，充当了背景的作用。

效果：

整体代码：

<!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>Test</title>
    <style>
        video {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display:float;
        }
        .box{
            color:red;
            position:relative;
            display:flex;
            justify-content:center;
        }
    </style>
</head>

<body>
    <video autoplay loop muted preload>
        <source src="./1.mp4">
    </video>
    <div class="box">
        <form>
            First name:<br>
           <input type="text" name="firstname">
           <br>
            Last name:<br>
           <input type="text" name="lastname">
        </form> 
    </div>
</body>

</html>