相关截图：

​

相关代码：

html
<!-- Banner区域 -->
    <div class="banner">
            <img  class="picture" src="images/banner3.jpg" alt="">

        <div class="center">
            <h2>遮罩层</h2>
        </div>

        <div class="list">

            <form  action="" method="POST">
                <input type="text" placeholder="your Name">
                <input type="text" placeholder="your Phone">
                <input type="email" placeholder="your email">
                <textarea rows="10"   cols="30" placeholder="write your content here"></textarea>
                <input class="last" type="submit" placeholder="send messang">
            </form>
        </div>

    </div>


    css:
    /* banner区域 */
.banner{
    width: 100%;
    position: relative;
}

.banner .picture{
    width:100%;
}

.banner .center{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid red;
    background-color:rgba(0, 0, 0, 0.5)

}

.banner .list{
    background: none;
}

.banner .list form{
    position: absolute;
    width: 504px;
    height: 310px;
    top: 50%;
    left: 50%;
    margin-top: -155px;
    margin-left: -252px;
    text-align: center;
}

.banner .list form input{
    width: 504px;
    height: 40px;
    background-color:rgba(0,0,0,0.3);
    margin-bottom: 10px;
    border: 1px solid #808080;
    color:#808080;

}

.banner .list form textarea{
    width: 504px;
    height: 110px;
    background-color:rgba(0,0,0,0.3);
    margin-bottom: 10px;
    border: 1px solid #808080;
    color:#808080;

}


.banner .list form .last{
    width: 200px;
    height: 40px;
    background-color:rgba(0,0,0,0.3);
    margin-bottom: 10px;
    border: 1px solid #808080;
    color:#808080;

}