web前端：视频背景（铺满整个网页）-CFANZ编程社区

1：效果图：

其中每行相片都是来回滚动，背景为视频

2：代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>带背景音乐的电子相册</title>
    <style type="text/css">
    body
    {
    	width:100%;
    	height:100%;
    }
    video{  <!--设置vedio属性-->
        	height: 100%;
        	width: 100%;
            position: absolute;  <!--重要-->
            z-index:-1;    <!--重要-->
            object-fit:fill   <!--重要-->
 }  
    .hhh{
    	text-align:center;
    	width:100%;
    	height:30px;
    	background-color:black;
    }
    ul{
    	list-style-type: none;
    	font-size:20px;
    	line-height: 1;
    }
   li{
   	float:left;
   	text-align:center;
   }
   img{
   	border:10px #cc0066 ridge;
   	width:140px;
   	height:140px;
   	margin-right: 30px
   }
    .li1{
   	float:center;
   	text-align:center;
   }
   </style>
</head>
<body >
  <embed src="nb.mp3" autoplay loop width="0" height="0">
  <video src="jyt.mp4" autoplay loop muted></video>
  <div class="hhh">
  <p><font size="5" face="黑体" color="red">音乐电子相册</font></p>
  <hr width="100%" color="yellow">
  <marquee behavior="alternate" direction="right" width="100%">
 <ul> 
   <li><a href="t1.jpg"  ><img src="t1.jpg"></a><br><a href="t1.jpg">t1</a></li>
   <li><a href="t2.jpg"  ><img src="t2.jpg" ></a><br><a href="t2.jpg">t2</a></li>
   <li><a href="t3.jpg"  ><img src="t3.jpg" ></a><br><a href="t3.jpg">t3</a></li>
   <li><a href="t4.jpg"  ><img src="t4.jpg" ></a><br><a href="t4.jpg">t4</a></li>
   <li><a href="t5.jpg"  ><img src="t5.jpg"></a><br><a href="t5.jpg">t5</a></li>
   <li><a href="t6.jpg"  ><img src="t6.jpg"></a><br><a href="t6.jpg">t6</a></li>
 </ul></marquee>
 <marquee behavior="alternate" direction="left" width="100%">
 <ul> 
   <li class="li1"><a href="t7.jpg"  ><img src="t7.jpg" ></a><br><a href="t7.jpg">t7</a></li>
   <li class="li1"><a href="t8.jpg"  ><img src="t8.jpg" ></a><br><a href="t8.jpg">t8</a></li>
   <li class="li1"><a href="t9.jpg"  ><img src="t9.jpg" ></a><br><a href="t9.jpg">t9</a></li>
   <li class="li1"><a href="t10.jpg"  ><img src="t10.jpg" ></a><br><a href="t10.jpg">t10</a></li>
  <li class="li1"><a href="t11.jpg"  ><img src="t11.jpg"></a><br><a href="t11.jpg">t11</a></li>
  <li class="li1"><a href="t12.jpg"  ><img src="t12.jpg"></a><br><a href="t12.jpg">t12</a></li>
 </ul></marquee>
<marquee behavior="alternate" direction="right" width="100%">
<ul> 
   <li><a href="t13.jpg"  ><img src="t13.jpg" ></a><br><a href="t13.jpg">t13</a></li>
   <li><a href="t14.jpg"  ><img src="t14.jpg" ></a><br><a href="t14.jpg">t14</a></li>
   <li><a href="t15.jpg"  ><img src="t15.jpg" ></a><br><a href="t15.jpg">t15</a></li>
   <li><a href="t16.jpg"  ><img src="t16.jpg" ></a><br><a href="t16.jpg">t16</a></li>
   <li><a href="t17.jpg"  ><img src="t17.jpg" ></a><br><a href="t17.jpg">t17</a></li>
   <li><a href="t18.jpg"  ><img src="t18.jpg" ></a><br><a href="t18.jpg">t18</a></li>
 </ul></marquee>
 <marquee behavior="alternate" direction="left" width="100%">
<ul> 
   <li class="li1"><a href="t19.jpg"  ><img src="t19.jpg" ></a><br><a href="t19.jpg">t19</a></li>
   <li class="li1"><a href="t20.jpg"  ><img src="t20.jpg" ></a><br><a href="t20.jpg">t20</a></li>
   <li class="li1"><a href="t21.jpg"  ><img src="t21.jpg" ></a><br><a href="t21.jpg">t21</a></li>
   <li class="li1"><a href="t22.jpg"  ><img src="t22.jpg" ></a><br><a href="t22.jpg">t22</a></li>
   <li class="li1"><a href="t23.jpg"  ><img src="t23.jpg" ></a><br><a href="t23.jpg">t23</a></li>
   <li class="li1"><a href="t24.jpg"  ><img src="t24.jpg" ></a><br><a href="t24.jpg">t24</a></li>
 </ul></marquee>
<hr width="100%" color="yellow">
</div>
</body>
</html>

3：简要介绍视频部分（其他部分不了解可以去看我之前的博文或者去w3school网站学习）

初次制作的小白会卡在视频背景不会铺满整个页面这个地方，解决方法很简单，直接在样式的属性设置里加一行：object-fit:fill ，关于vedio样式的属性设置时关键，关键步在代码中已经标明。