<div class="container">
  <p>The following items have their <code>background-color</code> set using the rgba() color format. This example shows the result of how the color changes when its opacity is changed by changing the alpha value in the function. The items start from a lower opacity up. </p>
  <ul class="colors">
    <li class="color-1">rgba(0, 102, 153, .1)</li>
    <li class="color-2">rgba(0, 102, 153, .3)</li>
    <li class="color-3">rgba(0, 102, 153, .5)</li>
    <li class="color-4">rgba(0, 102, 153, .7)</li>
    <li class="color-5">rgba(0, 102, 153, .85)</li>
    <li class="color-6">rgba(0, 102, 153, 1)</li>
  </ul>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAL0lEQVQYV2NkIBIwEqHOGKjmLDEKwWbhUwg2CWYjRSaimESRiVhNIstEvCbBTAQAl5IFCylWpesAAAAASUVORK5CYII=) repeat;
}

.container {
  margin: 40px auto;
  max-width: 700px;
  padding: 30px;
}

.colors li {
  display: inline-block;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  width: 200px;
  height: 100px;
  margin-bottom: 3px;
}

.color-1 {
  background-color: rgba(0, 102, 153, .1);
}

.color-2 {
  background-color: rgba(0, 102, 153, .3);
}

.color-3 {
  background-color: rgba(0, 102, 153, .5);
}

.color-4 {
  background-color: rgba(0, 102, 153, .7);
}

.color-5 {
  background-color: rgba(0, 102, 153, .85);
}

.color-6 {
  background-color: rgba(0, 102, 153, 1);
}