JSFiddle - React, Tailwind, and code Playground

HTML

<p class="text">
    Here is some text. This will be displayed beneath the black circle.
    Here is some text. This will be displayed beneath the black circle.
</p>

CSS

.text {
    text-align: center;
    padding: 20px;
    border: solid 1px #eee;
    width: 200px;
    position: relative;
}

.text .circle {
    background-image: url("http://nontalk.s3.amazonaws.com/black-circle.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Here's where you set the opacity */
    opacity: .5;
    
    /* Here's where you set the opacity for the bad browser */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

JavaScript

// Add a span using javascript

$("<span class='circle'></span>").appendTo("p.text");