002-全屏视频背景

最新推荐文章于 2024-08-12 16:19:20 发布

leahcimI

最新推荐文章于 2024-08-12 16:19:20 发布

阅读量166

点赞数

分类专栏：交互文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_51772310/article/details/119674208

版权

交互专栏收录该内容

1 篇文章 0 订阅

订阅专栏

002-全屏视频背景（Fullscreen Video Background）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Fullscreen Video Background</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="banner">
            <video autoplay muted loop>
                <source src="bg.mp4" type="video/mp4">
            </video>
            <div class="content">
                <h1>Fullscreen Video Banner</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 laborum.</p>
            </div>
        </div>
    </body>
</html>
//头部：字符集、标题、css样式引用（链接）；身体：名为banner的类，里面放入视频（设置为自动静音循环播放）来源为视频、文字

【emmet速写】

——.banner video>source[src=bg.mp4 type=video/mp4]

设置身体和banner的css样式

@import url('https://fonts.googleapis.com/css?family=Poppins:20');
body
{
    margin: 0;
    padding:0;
    font-family:'Poppins',sans-serif;
    height: 1000px;
}
.banner
{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
//身体：设置内外边距和字体，以及整个容器的高度；
banner：设置宽高、溢出处理、flex布局及对齐方式

【CSS 溢出（overflow)】
overflow属性指定当元素的内容太大而无法放入指定区域时，是否剪切内容或添加滚动条。
overflow属性具有以下值：
visible- 默认。溢出不会被剪裁。内容呈现在元素框外
hidden - 溢出被剪裁，其余内容将不可见
scroll - 裁剪溢出，并添加滚动条以查看其余内容
auto- 与类似scroll，但仅在必要时添加滚动条
(overflow相当于裁剪图片到页面尺寸，否则图片会穿帮）

【弹性盒元素(display:flex)】柔性布局

【justify-content:center】设置flex items沿主轴的对齐方式。（居中排列？）

【align-items:center】设置flex items沿交叉轴的对齐方式。（对齐各个物体的中线）
二者区别见https://juejin.cn/post/6844903911690600456

【object-fit:cover】
设置元素在框内对齐方式。
cover:被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框

【pointer-events: none】
鼠标事件拜拜

设置视频样式

.banner video
{
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100;
    pointer-events: none;
}
//绝对定位：左上、（保持宽高比）填充、设置宽高（全屏）、鼠标事件拜拜

设置content样式，主要设置层级关系、整体宽度、边距以及居中对齐

.banner .content//【重要：.banner和.content中间必须加空格，否则无法成功添加样式！！】
{
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
}
//相对定位、z-index为1表明显示层级，设置最大宽度，边距，文本对齐居中

在这里插入图片描述
我们来继续设置字体样式，主要设置字号和颜色

.banner .content h1
{
    margin: 0;
    padding: 0;
    font-size: 4.5em;
    text-transform: uppercase;
    color:aliceblue;
}
.banner .content p
{
    font-size: 1.5em;
    color: aliceblue;
}
//对于第一级标题，设置内外边距、字号、全大写、颜色；对于段落文本，设置字号和颜色

【text-transform:uppercase】将元素的文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作

在这里插入图片描述

leahcimI

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
002-全屏视频背景

002-全屏视频背景（Fullscreen Video Background）<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Fullscreen Video Background</title> <link rel="stylesheet" href="style.css">
复制链接

扫一扫