前端-网页的视频背景制作

最新推荐文章于 2024-04-15 18:41:13 发布

'Han'Zi

最新推荐文章于 2024-04-15 18:41:13 发布

阅读量1.1k

点赞数 2

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

本文链接：https://blog.csdn.net/qq_52347540/article/details/116765950

版权

前端专栏收录该内容

59 篇文章 1 订阅

订阅专栏

文章目录

代码，下面是详解
导入视频
- 1. 使用HTML的video标签
设置视频的图层
- 2.scc处理视频大小，图层

代码，下面是详解

<head>
    <title>Title</title>
  <style>
    video{
      z-index:-100;
      width: 100%;
      height:100%;
    }
  </style>
</head>

<body>
<video   src="csdvd.mp4" type="video/mp4" autoplay muted loop>
</video>
</body>

导入视频

1. 使用HTML的video标签

<video   src="csdvd.mp4" type="video/mp4" autoplay muted loop></video>

src属性是指定 video 文件的本地路径【你要导入视频的路径】
我这里是路径如下，提前把视频放到同一个文件夹好操作

在这里插入图片描述

type的意思是你要导入的类型【视频/音频】
autoplay ：自动播放
muted ：取消音频
loop ：循环播放

设置视频的图层

2.scc处理视频大小，图层

 <style>
        video{
             z-index:-100;
            width: 100%;
            height:100%;
        }

z-index：数字越小，它就在越下面【可以被上层覆盖】
width，height：设置大小【我都设置的100%】

'Han'Zi

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
4
评论
前端-网页的视频背景制作

文章目录代码，下面是详解导入视频1. 使用HTML的video标签设置视频的图层2.scc处理视频大小，图层代码，下面是详解<head> <title>Title</title> <style> video{ z-index:-100; width: 100%; height:100%; } </style></head><body><vi
复制链接

扫一扫