JSFiddle - React, Tailwind, and code Playground

HTML

<div class="background">
      <div class="transbox">
        <p>This is some text that is placed in the transparent box.</p>
      </div>
    </div>

CSS

.background {
  background: url(http://www.handyman-austin.com/wp-content/uploads/2015/01/Buildings.jpg) center;
  border: 2px solid black;
  z-index: -1;
  width: 100%;
  height: 500px;
  position: relative;
  opacity: 0.4;
  -webkit-filter: sepia(100%);
  /* Chrome, Safari, Opera */
  filter: sepia(100%);
}
div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  /* For IE8 and earlier */
}
div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}