2-9作业？？？？？

头部设置了磁贴定位，banner图也设置了遮罩层，但是往下滚动时头部也会被遮罩住，咋办？？

怎样为类似input这些标签设置成透明？？？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一次作业</title>
    <link rel="stylesheet" href="part1.css" type="text/css">
</head>
<body>
<div class="header"><!--顶部-->
 <div class="logo">
        <img src="logo.png" alt="logo">
    </div>
    <div class="nav">
        <ul>
            <li>HOME</li>
            <li>ABOUT</li>
            <li>GALLERY</li>
            <li>FACULTY</li>
            <li>EVENTS</li>
            <li>CONTACT</li>
        </ul>
    </div>
</div>
<div class="clear"></div>
<div class="content"><!--内容区-->
 <div class="banner">
        <img src="banner3.jpg" alt="上面的大图">
        <div class="opacity"></div>
        <div class="form">
            <div class="form-f"><input class="info" type="text" placeholder="your Name"></div>
            <div class="form-f"><input class="info" type="text" placeholder="your Phone"></div>
            <div class="form-f"><input class="info" type="text" placeholder="your Email"></div>
            <div class="form-f"><textarea name="comment" id="comment" cols="40" rows="5" placeholder="Write Your Comment Here"></textarea></div>
            <div class="button"><button>SEND MESSAGE</button></div>
        </div>
    </div>
    <div class="about"></div>
    <div class="gallery"></div>
</div>
<div class="footer"></div><!--底部-->
</body>
</html>


*{
    margin: 0;
    padding: 0;
}
/**
.header
 */
.header{
    width: 100%;
    height: 50px;
    background-color: #07cbc9;
    text-align: center;
    position:sticky;
    top: 0;
}
.logo{
    float: left;
    height: 50px;
}
.logo img{
    padding: 1px 0 1px 100px;
}
.nav ul{
    width: 510px;
    height: 50px;
    float: right;
    padding-right: 50px;
    text-align: center;
}
.header .nav ul li{
    padding:0 10px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    list-style: none;
    float: left;
    color: #ffffff;
    font-family: "Microsoft YaHei UI";
}
.header .nav ul li:hover{
    background-color: #000000;
}
.clear{
    clear: both;
}
/**
banner图
 */
.content .banner img{
    width: 100%;
    height: 635px;
}
.content .banner .opacity{
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: 635px;
    background-color: #000000;
    opacity: 0.5;
}
/**
banner图中的表单
 */
.content .banner .form{
    width: 400px;
    height: 300px;
    position: absolute;
    top:367.5px;
    left: 50%;
    margin-top: -150px;
    margin-left: -200px;
}
.content .banner .form .info{
    width: 400px;
    height:30px;
}
.content .banner .form .form-f:hover{
    border-color: #07cbc9;
}
.content .banner .form textarea{
    resize: none;
    width: 400px;
    height: 100px;
}
.content .banner .form .form-f{
    padding-bottom: 10px;
}
.content .banner .form button{
    width: 100px;
    height: 40px;
}
.content .banner .form .button{
    text-align: center;
}

高为砚 2017-12-27

源自：网页布局案例 2-9 作业题