如何让透明度设置不影响文字显示，还有图片居中是否有更好解决方案？

当前显示效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="header">
    <div class="logo">
        <img src="image/logo.png">
    </div>
    <div class="nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">GALLERY</a></li>
            <li><a href="#">FACULTY</a></li>
            <li><a href="#">EVENTS</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </div>
</div>
<div class="banner">
    <div class="banner-picture">
        <img src="image/banner3.jpg">
    </div>
    <!--遮罩层-->
    <div class="topLayer">

    </div>
    <!--banner图部分的输入框-->
    <div class="topLayer-top">
        <form class="form">
            <input type="text" name="" placeholder="your Name">
            <br>
            <input type="text" name="" placeholder="your Profile">
            <br>
            <input type="text" name="" placeholder="your Email">
            <textarea placeholder="Write your Comments Here"></textarea>
            <br>
            <button>FIND MESSAGE</button>
        </form>
    </div>
</div>
<div class="middle">
    <div class="m-top">
        <div class="m-top-title">ABOUT</div>
        <!--添加蓝色下划线-->
        <div class="m-top-underline"></div>
        <div class="m-top-description">
            Lorem Ipsum is simply dummy text of the printing and typeseeting<br>
            industry. Lorem Ipsum has been the industry's standard dummy<br>
            text ever since the 1500s.
        </div>
    </div>
    <div class="m-middle">
        <div class="m-middle-left">
            <div class="word">A WORD ABOUT US</div>
            <div class="left-picture">
                <div class="description">Praesent dignissim viverra est,sed<br>
                    bibendum ligula congue non. Sed ax nislet<br>
                    felis gravida commodo? Suspendisse<br>
                    diam amet.
                </div>
                <div class="explore">
                    <button>EXPLORE</button>
                </div>
            </div>
        </div>
        <div class="m-middle-middle">
            <img src="image/bb3.jpg">
        </div>
        <div></div>
    </div>
</div>
</body>
</html>

以下是CSS文件：

* {
    margin: 0;
    padding: 0;
}

.header {
    width: 100%;
    height: 100px;
    background: #07CBC9;
    /*固定顶部页面*/
    position: fixed;
    /*将头部页面置于顶层*/
    z-index: 10;
}

.header .logo {
    float: left;
    padding-top: 26px;
}

.header .nav {
    float: right;
}

.header .nav ul {
    padding-right: 100px;
}

.header .nav ul li {
    display: inline-block;
    list-style: none;
    margin: 0 30px;
    line-height: 100px;
}

.header .nav ul li a {
    text-decoration: none;
    color: white;
}

.header .nav ul li a:hover {
    color: gold;
    /*鼠标经过时产生加粗效果*/
    font-weight: bolder;
}

.banner {
    /*给顶部导航栏预留100px*/
    padding-top: 100px;
    width: 100%;
    height: 1000px;
}

.banner .banner-picture img {
    display: block;
    top: 100px;
    width: 100%;
    height: 1000px;
}

.banner .topLayer {
    width: 100%;
    height: 1000px;
    position: absolute;
    top: 100px;
    left: 0;
    background: black;
    opacity: 0.5;
}

.banner .topLayer-top {
    padding-top: 100px;
    position: absolute;
    top: 100px;
    width: 800px;
    height: 800px;
    z-index: 2;
    margin: 50px 50%;
    left: -400px;
    background-color: transparent;
}

.banner form {
    text-align: center;
}

.banner .form input {
    margin: 10px;
    width: 500px;
    height: 40px;
    color: white;
    /*设定输入字体大小*/
    font-size: 20px;
    background-color: transparent;
    border: 1px solid white;
}

.banner .form input:hover,
.banner .form textarea:hover {
    border: 3px solid #07cbc9;
}

.banner .form input::placeholder {
    color: white;
    font-size: 20px;
}

.banner .form textarea::placeholder {
    color: white;
    font-size: 20px;
    font-family: 微软雅黑;
}

.banner .form textarea {
    margin: 10px;
    width: 500px;
    height: 100px;
    background-color: transparent;
    border: 1px solid white;
    /*设定输入字体大小*/
    font-size: 20px;
}

.banner .form button {
    margin: 10px;
    width: 150px;
    height: 50px;
    background-color: transparent;
    color: white;
    border: 1px solid #F2FFF3;
}

/* 鼠标滑过提交按钮时，按钮没有边框，背景颜色变成#07cbc9。*/
.banner .form button:hover {
    border: none;
    background-color: #07cbc9;
}

/*设置标题样式*/
.middle .m-top .m-top-title {
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    padding-top: 50px;
    padding-bottom: 10px;
}

/*为ABOUT下方添加蓝色下划线*/
.middle .m-top .m-top-underline {
    top: 20px;
    margin: 0 auto;
    width: 30px;
    height: 2px;
    background-color: #07CBC9;
}

/*为描述文字设置样式*/
.middle .m-top .m-top-description {
    line-height: 25px;
    padding-top: 30px;
    text-align: center;
    color: gray;
}

.middle .m-middle {
    margin: 0 auto;
    width: 1200px;
    height: 500px;
}

.middle .m-middle .m-middle-left {
    float: left;
}

/*设置左侧标题文字样式*/
.middle .m-middle .m-middle-left .word {
    padding-top: 10px;
    text-align: center;
    width: 200px;
    font-size: 30px;
}

/*设置左侧描述文字样式*/
.middle .m-middle .m-middle-left .left-picture {
    /*给左侧描述文字设置左浮动*/
    float: left;
    width: 370px;
    height: 246px;
    /*为左侧描述文字设置背景颜色和透明度*/
    background-color: white;
    opacity: 0.5;
}

.middle .m-middle .m-middle-left .left-picture .description {
    color: black;
    padding-top: 15px;
    padding-left: 15px;
}

/*设置explore按钮的样式*/
.middle .m-middle .m-middle-left .left-picture .explore {
    padding-left: 15px;
    padding-top: 10px;
}

/*设置explore按钮的样式*/
.middle .m-middle .m-middle-left .left-picture button {
    width: 102px;
    height: 45px;
    background-color: black;
    border: 1px solid black;
    color: white;
}

/* 中间部分左侧的EXPLORE按钮，鼠标移入时背景变为透明的，但是有黑色的边框*/
.middle .m-middle .m-middle-left .left-picture button:hover {
    background-color: transparent;
    color: black;
}

/*设置中间图片的样式*/
.middle .m-middle .m-middle-middle{
    display: block;
    float: left;
    width: 568px;
    height: 380px;
    margin-left: -95px;
    padding-top: 15px;
}

weixin_慕设计1308382 2020-07-17

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