视频背景网页

创作时间:

作者:

@小白创作中心

视频背景网页

引用

CSDN

https://blog.csdn.net/Lsc_hei/article/details/103615002

在网页设计中，将视频作为背景是一种常见的视觉效果。本文将详细介绍如何在HTML中实现这一效果，包括如何让视频完全填充指定的div容器，以及如何控制视频的播放属性。

需求分析

我们需要实现一个功能：在页面中创建一个div容器，将视频设置为该容器的背景，并确保视频能够自动播放且完全填充整个div，同时保证视频不会溢出容器边界。

实现步骤

1. HTML结构

首先，我们需要在HTML中创建一个包含视频的div容器，并设置视频的基本属性：

<div class="parent" style="width:1920px;height:1080px;">
    <video class="video_back" src="/img/yundun.mp4" muted autoplay="autoplay" loop="loop">
        您的浏览器不支持
    </video>
    <div class="wen">这是视频的上浮文字</div>
</div>

2. CSS样式

接下来，通过CSS来控制视频的显示效果：

.video_back {
    width: 100% !important;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -9999;
    object-fit: fill;
}
#parent{
    position:absolute;
}
.wen {
    font-size: 30px;
    color: #fff;
}

关键属性说明

position: absolute;：使视频相对于其父元素进行绝对定位。
z-index: -9999;：将视频置于所有元素的最底层，确保其作为背景层。
object-fit: fill;：使视频完全填充到div中，即使宽高比不匹配也会被拉伸以适应容器。
muted：静音播放。
autoplay：自动播放。
loop：循环播放。
controls：不显示视频播放控件。

最终效果

通过上述设置，我们可以实现一个视频背景效果，视频会自动播放并完全填充指定的div容器，同时不会影响其他元素的显示。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频背景网页</title>
    <style type="text/css">
        .video_back {
            width: 100% !important;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -9999;
            object-fit: fill;
        }
        #parent{
            position:absolute;
        }
        .wen {
            font-size: 30px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="parent" style="width:1920px;height:1080px;">
        <video class="video_back" src="/img/yundun.mp4" muted autoplay="autoplay" loop="loop">
            您的浏览器不支持
        </video>
        <div class="wen">这是视频的上浮文字</div>
    </div>
</body>
</html>

通过以上步骤，你可以轻松实现一个视频背景效果，为你的网页设计增添更多视觉吸引力。

热门推荐

《过零丁洋》的创作背景是什么？该如何赏析呢？