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

文章目录

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

代码,下面是详解

<head>
    <title>Titletitle>
  <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%】

你可能感兴趣的:(前端,css)