002-全屏视频背景

最新推荐文章于 2024-08-20 13:42:14 发布

小半q

最新推荐文章于 2024-08-20 13:42:14 发布

阅读量380

点赞数 7

分类专栏： css练习文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_42482544/article/details/135791653

版权

css练习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML和CSS创建一个带有视频背景的网页，同时保持内容区域的响应式布局。代码展示了如何设置视频循环播放且静音，以及如何控制文本样式适应不同屏幕尺寸。

摘要由CSDN通过智能技术生成

效果

全屏视频背景

视频素材：https://www.pexels.com/videos/

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="banner">
    <video src="assets/bg.mp4" loop autoplay muted></video>

    <div class="content">
        <h1>Life Is Fantastic</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur
            adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam
            quis nostrud exercitation ullamco laboris nisi
            ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur
            Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt
            mollit anim id est labrum.
        </p>
    </div>
</div>
</body>
</html>

style.css


body {
    margin: 0;
    padding: 0;
}

.banner {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.banner .content {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.banner .content h1 {
    margin: 0;
    padding: 0;
    font-size: 4.5em;
    /*英文字母全部大写*/
    text-transform: uppercase;
    color: #fff;
}

.banner .content p {
    font-size: 1.5em;
    color: #fff;
    /*文本来两端对齐*/
    text-align: justify;
}