请问下左边透明的怎么在图片之上呢？除此之外代码还有什么地方需要优化吗？

尝试过的解决方式：

尝试在左侧透明框，和中间的图片框加z-index，但是无效

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .top {
            margin: 0px auto;
            height: 200px;
        }

        .top p {
            font-size: 32px;
            text-align: center;
            font-weight: bold;
        }

        .top .line {
            width: 50px;
            height: 2px;
            background-color: #07cbc9;
            margin: 10px auto;
        }

        .top span {
            display: inline-block;
            width: 500px;
            height: 100px;
            text-align: center;
            position: relative;
            left: 50%;
            margin-left: -250px;
            font-size: 14px;
        }

        .box {
            overflow: hidden;
            width: 1201px;
            height: 464px;
            margin: 0 auto;
        }

        .box .left {
            float: left;
            width: 200px;
            height: 300px;
        }

        .box .left .left-t p {
            font-size: 32px;
            font-weight: bold;
        }

        .box .left .left-b {
            float: left;
            width: 300px;
            height: 180px;
            border: 1px solid gray;
            background: rgba(255, 255, 255, .5);
            padding: 20px;
            z-index: 222;
        }

        .box .left .left-b button {
            width: 140px;
            height: 40px;
            background-color: #000;
            color: #fff;
        }

        .box .center {
            float: left;
            width: 650px;
            height: 434px;
            text-align: center;
            margin: 30px auto;
            z-index: 111;
            background: url("img/bb3.jpg");
        }

        .box .right {
            float: right;
        }

        .box .right .right-t,
        .box .right .right-b {
            width: 260px;
            height: 200px;
            border: 1px solid skyblue;
            margin-top: 20px;
        }

        .box .right .right-t p:first-child,
        .box .right .right-b P:first-child {
            font-size: 32px;
            text-align: center;
            font-weight: bold;
        }

        .box .right .right-t p:last-child,
        .box .right .right-b P:last-child {
            text-align: center;
        }

        .box .right .right-t .line,
        .box .right .right-b .line {
            width: 50px;
            height: 2px;
            background-color: #07cbc9;
            margin: 10px auto;
        }
    </style>
</head>

<body>
    <div class="top">
        <p>ABOUT</p>
        <div class="line"></div>
        <span>boream Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industy's standard dummy text ever since the 1500s</span>
    </div>
    <div class="box">
        <div class="left">
            <div class="left-t">
                <p>A WORDS ABOUT US</p>
            </div>
            <div class="left-b">
                <p>parent disgnissim biberra est,sed bibendum ligula congue non.Sed ac nisl er felis gravida commodo?Suspendisse eget ulliamcrper ipsum,Suspendisse diam amet.</p>
                <button>EXPIORE</button>
            </div>
        </div>
        <div class="center">
            <!-- <img src="img/bb3.jpg" alt=""> -->
        </div>
        <div class="right">
            <div class="right-t">
                <p>70000</p>
                <div class="line"></div>
                <p>Student</p>
            </div>
            <div class="right-b">
                <p>600</p>
                <div class="line"></div>
                <p>Facully</p>
            </div>
        </div>
    </div>
</body>

</html>