老师，为什么我这个遮罩是100%高度但是没占满图片呢？

这是html：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" charset="UTF-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<!--页头-->
<div class="header-box">
<div class="logo"><a href="#"><img src="images/logo.png"/></a></div>
<ul class="nav">
<li><a href="#">CONTACT</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">FACULTY</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">HOME</a></li>
</ul>
</div>
<!--主体-->
<div class="body-box">
<div class="banner-box">
<div><img src="images/banner3.jpg"/></div>
<div class="opci_"></div>
<form>
<input>
<input>
<input>
<textarea></textarea>
<button>SEED MASSAGE</button>
</form>
</div>
</div>
<!--页尾-->
<div></div>
</body>
</html>
-------------------------------------------------------------------------------------
这是css：
*{
    margin:0;
    padding:0;
}
/*页头部分css*/
.header-box{
    width:100%;
    height:80px;
    background:#07cbc9;
    overflow:hidden;
    position:fixed;
    z-index:2;
    border:2px blue solid;
}
.logo{
    width:260px;
    height:48px;
    float:left;
    margin-left:100px;
    margin-top:16px;
}
.nav{
    float:right;
    list-style-type:none;
    overflow:hidden;
    margin-right:90px;
}
.nav li{
    float:left;
    line-height:80px;
    margin-right:10px;
    margin-left:10px;
}
.nav li a{
    text-decoration:none;
    color:#ffffff;
    font-weight:bolder;
}
.nav li a:hover{
    color:orange;
}
/*Nanner区、遮罩、表单部分*/
.body-box{
    width:100%;
}
.banner-box{
    width:100%;
}
.banner-box img{
    width:100%;
    top:80px;
}
.opci_{
    width:100%;
    height:100%;
    background-color:#000;
}

不会敲代码的小浩子 2019-03-27

源自：项目：网页布局案例 2-10 作业题