<div id="bg">
  <div class="RGBA">RGBA</div>
  <div class="HSLA">HSLA</div>
  <div class="Opacity">Opacity</div>
  <div class="HEX">HEX</div>
</div>

#bg{
  background:url(https://photo.minwt.com/cc0/06.jpg);
  width:1200px;
  height:700px;
  background-size:cover;
}
#bg>div{float:left;}
.HEX{
  width:300px;
  height:300px;
  background:#00ffcca3;
}
.Opacity{
  width:300px;
  height:300px;
  background:#00ffcc;
  opacity: .5;
}
.RGBA{
  width:300px;
  height:300px;
  background:rgba(0,255,204,0.2);
}
.HSLA{
  width:300px;
  height:300px;
  background:hsla(168,100%,50%,0.3);
}