JSFiddle - React, Tailwind, and code Playground

HTML

<div class="my-cool-wrapper">
		<div class="text-and-images-on-top">
			<p>Here some content (text AND images) "on top of the transparent background"</p>
			<img src="http://i.imgur.com/LnnghmF.gif">
		</div>
		<div class="transparent-background">
		</div>
	</div>

CSS

.my-cool-wrapper {
			 position: relative;
		}
		.my-cool-wrapper .text-and-images-on-top {
			 padding: 10px 15px 19px 15px;
			 z-index: 1;
			 position: relative; /* needed to unable the z-index */
		}
		.my-cool-wrapper .transparent-background {
			 position: absolute;
			 top: 0;    
			 width: 100%;
			 height: 100%;
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";       /* IE 8 */
			filter: alpha(opacity=10);  /* IE 5-7 */
			-moz-opacity: 0.1;          /* Netscape */
			-khtml-opacity: 0.1;        /* Safari 1.x */
			opacity: 0.1;               /* Good browsers */
			background-color: blue;
		}