Chyba najprościej jest uzyskać ten efekt jak już podał @Oskarejro, przez color alpha channel (rgba), ale przez pewien trick można też za pomocą opacity.
<div class="container">
<div class="box">
<div class="label-one">Lorem ipsum - box one<br>opacity</div>
<div class="one"></div>
</div>
<div class="box two">
<div class="label-two">Lorem ipsum - box two<br>color alpha channel</div>
</div>
</div>
body, .container {
margin: 0;
padding: 0;
border: 0;
width: 100vw;
height: 100vh;
background-image: url(http://lorempixel.com/1200/1200/abstract);
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.box {
position: relative;
width: 250px;
height: 150px;
margin: 2em;
border: 2px solid black;
display: flex;
justify-content: center;
align-items: center;
font: 900 1.2em/2em monospace;
}
.box .label-one, .label-two {
width: 80%;
border: 2px solid black;
background-color: white;
text-align: center;
}
.one {
position: absolute;
width: 100%;
height: 100%;
background-color: green;
opacity: 0.5;
}
.box .label-one {
position: relative;
z-index: 2;
}
.two {
background-color: rgba(255,0,0,0.5);
}