图片被背景视频覆盖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>期末</title>
<link rel="stylesheet" href="css/QiMo.css">
</head>
<body>
<div class="aa1">
<div class="a1">
<div class="a2">
<a class="logo" href="#" title="英雄联盟官网">
<img src="img/logo.jpg" alt="英雄联盟" width="157px" height="60px">
</a>
</div>
<div class="ul-1">
<ul>
<li>
<a class="a1-1" href="#" title="游戏资料">
<span class="span-1">游戏资料</span>
<span class="span-2">GAME INFO</span>
</a>
</li>
<li>
<a class="a1-1" href="#" title="商城/合作">
<span class="span-1">商城/合作</span>
<span class="span-2">STORE</span>
</a>
</li>
<li>
<a class="a1-1" href="#" title="社区互动">
<span class="span-1">社区互动</span>
<span class="span-2">COMMUNITY</span>
</a>
</li>
<li>
<a class="a1-1" href="#" title="赛事官网">
<span class="span-1">赛事官网</span>
<span class="span-2">ESPORTS</span>
</a>
</li>
<li>
<a class="a1-1" href="#" title="自助系统">
<span class="span-1">自助系统</span>
<span class="span-2">SYSTEM</span>
</a>
</li>
</ul>
</div>
</div>
<div>
<div class="img-1">
</div>
<div class="video-center">
<video class="video-top" autoplay="autopaly" loop="loop" muted="1">
<source src="img/video.webm" type="video/webm">
<source src="img/video.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</body>
</html>
.aa1{
height: 100%;
height: 990px;
}
.a1{
width: 100%;
height: 78px;
overflow: visible;
position: absolute;
top: 0;
left: 0;
z-index: 11;
background-color: black;
position: fixed;
}
.a1-1{
float: left;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
.a2{
float: left;
width: 167px;
height: 60px;
text-decoration: none;
}
.logo{
float: left;
width: 160px;
height: 67px;
margin-top: 10px;
text-decoration: none;
}
a{
text-decoration: none;
}
.ul-1{
float: left;
width: 55%;
height: 78px;
box-sizing: border-box;
margin-left: 30px;
padding-top: 16px;
list-style: none;
padding: 0px;
margin: 0px;
}
li{
float: left;
list-style: none;
list-style-position: outside;
list-style-image: none;
list-style-type: none;
width: 20%;
height: 78px;
text-align: center;
}
.span-1{
display: block;
color: #fff;
font-size: 18px;
letter-spacing: 1px
}
.span-2{
display: block;
color: #aeaeae;
font-size: 11px;
margin-top: -1px;
letter-spacing: 1px
}
.video-center{
width: 1920px;
height: 990px;
display: block;
position: absolute;
top: 78px;
left: 50%;
margin-left: -960px;
pointer-events: none;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
background-color: #aeaeae;
}
.video-top{
pointer-events: none;
}
.img-1{
width: 490px;
height: 300px;
background: block;
background: url(疾风剑豪.jpg no-repeat);
}
运行结果及报错内容
我的解答思路和尝试过的方法
最终结果我想让图显示在在最前面而不被背景覆盖在下面
