如何使用 HTML 和 CSS 创建彩色视频背景文本?

如何使用 HTML 和 CSS 创建彩色视频背景文本?

像往常一样,我们首先需要获取三个文件,index.html,CSS 文件夹中的一个名为 style.css 的文件和一个名为 video 的文件夹,其中我们将在项目中使用一个短视频。

首先,我们shift+!在 index.html 文件中!我将通过按下按钮来安排语法。然后我们将获取一个部分标签,然后是一个标题标签,并在其中写入我们想要的任何文本。然后我们将获取一个名为 video 的标签,在其中我们将获取一些属性并像下面的代码一样排列它。视频中的详细信息

技术学校48

接下来,我们将继续我们的 style.css 文件,因为现在我们需要装饰 index.html 中的所有标签。我们将首先将文件的所有边距和填充设置为 0,以便没有默认的间隙或边距和填充。即——
*{
边距:0;
填充:0;
}

接下来,我们需要对 section 标签进行 CSS 处理。我们将CSS部分如下。视频中的详细信息
部分{
显示:弯曲;
证明内容:中心;
对齐项目:居中;
背景:#000;
宽度:100%;
高度:100vh;
位置:相对;
}

接下来,我们将css我们的标题标签。我们的 header 标签的 CSS 如下。视频中的详细信息
第 h2 节{
font-family: 'Rowdies',草书;
字体大小:6em;
颜色:#fff;
字体粗细:600;
位置:相对;
z-index:1;
混合混合模式:叠加;
}

我们的下一个也是最后一个任务是 CSS 视频标签,以便我们想要的项目结束。我们视频标签的 CSS 如下。视频中的详细信息
部分视频
宽度:100%;
高度:100%;
位置:绝对;
顶部:0;
左:0;
适合对象:封面;
}

之后,我们的任务是刷新浏览器并查看我们项目的输出。视频中的详细信息
希望大家喜欢这个项目。稍后,我将再次尝试给您一个新项目。

- 谢谢你 -

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明

本文链接:https://www.qanswer.top/27062/35471108

posted @ 2022-09-11 08:36  哈哈哈来了啊啊啊  阅读(83)  评论(0编辑  收藏  举报