JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">

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

CSS

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

#box5 {
    margin:10px;
    width:250px;
    height:250px;
    border:1px solid green;
    overflow:auto;
    position: relative;
    float:left;
    padding:20px;
    color:red;
    font-size:18px;
    font-weight:bolder;
}

#box5::after
{
    content: "";
    opacity:0.2;
    background-image:url(https://developer.mozilla.org/media/img/mdn-logo.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size:50%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    padding:20px;
    overflow:auto;
}