RGB & RGBA

Understanding rgb & rgba colors

HTML

<div class="box">
  <p>Original Image</p>
  <img src="http://fable.io/samples-browser/img/webGLTerrain.png" alt="mountain">
</div>
  <p>No transparency</p>
<div class="box1">
  <img src="http://fable.io/samples-browser/img/webGLTerrain.png" alt="mountain">
</div>
  <p>0.8 transparency</p>
<div class="box2">
    <img src="http://fable.io/samples-browser/img/webGLTerrain.png" alt="mountain">
</div>
  <p>0.5 transparency</p>
<div class="box3">
    <img src="http://fable.io/samples-browser/img/webGLTerrain.png" alt="mountain">
</div>

CSS

.box1,.box2,.box3{
  width:200px;
  height:200px;
  position:relative;
  display:inline-block;
}

.box1:before{
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  background-color:rgb(0,0,0); /* transperency is 0 */
  z-index:999;
}

.box2:before{
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  background-color:rgba(0,0,0,0.8); /* transperency is 0.8 */
  z-index:999;
}

.box3:before{
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  background-color:rgba(0,0,0,0.5); /* transperency is 0.5 */
  z-index:999;
}