JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">

    <div id="box5"></div>
        
    <div id="box5-p">
        This text is normat text over opacity background
    </div>
    
</div>

CSS

#box
{
    position: relative;
    width:250px;
    height:250px;
}

#box5 {
    margin:10px;
    width:100%;
    height:250px;
    border:1px solid green;
    overflow:auto;
    float:left;
    background-size:50%;
    background: url(https://developer.mozilla.org/media/img/mdn-logo.png);
    background-repeat:no-repeat;
    background-position:center;
    padding:20px;
    opacity: 0.2;
    z-index:99;
}

#box5-p {
    position: absolute;
    top:20px;
    left:20px;
    opacity:1;
    color:red;
    font-size:18;
    font-weight:bolder;
    z-index:100;
}