JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<style>
div.background{width:560px;height:112px;background :url(http://lorempixel.com/output/abstract-q-c-560-112-9.jpg) repeat;}
div.transbox{width:560px;height:20px;background:#000;opacity:0.5;filter:alpha(opacity=50);}
div.transbox p{padding:1px 10px;color:#fff;}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>