New web developers and designers often get rgba (and its hsla equivalent) confused with opacity, using them interchangeably until they come up against a visual result that makes no sense.

This is understandable, as both opacity and the a component in rgba refer to the same quality: the level of transparency. However, their application and effect is very different:

• one (opacity) is a property; the other is the component of the value of a color property, such as background-color, box-shadow-color, or border-color.

• Most importantly, opacity affects the entire element it is applied to, whereas rgba affects only one aspect.

opacity, can be thought of as a “fade out” effect for elements. As an example, let’s overlap two divs with absolute positioning. Both divs will have white text. The first will have a dark blue background. The div on top will have a black background, and contain an image. First, the HTML:

1. <div id=”lower”><p>There is nothing wrong with your television set.
2. Do not attempt to adjust the picture. We are controlling the transmission.
3. We will control the horizontal, we will control the vertical.</p></div>
4. <div id=upper"><p><img src="the-twilight-zone.png"
5. alt="The Twilight Zone" title="The Twilight Zone" />We can change the focus to
6. a soft blur or sharpen it to crystal clarity.
7. For the next hour, sit quietly and we will
8. control all that you see and hear.</p></div>

Then the CSS:

1. body { background: #444; }
2. div { width: 20em; padding: 3em;
3. position: absolute; border: 5px double #000; color: white; }
4. div p { margin: 0; text-align: justify; }
5. div#lower { background-color: rgb(0, 0, 127);  }
6. div img { width: 200px; height: 150px; float: right;
7. margin-left: 3em; margin-bottom: 3em; }
8. div#upper { left: 18em; top: 8em; background-color: rgba(0, 0, 0, 1);  }

We’ll lower the alpha value for the upper div halfway to 0. Note that the text, border and image remain unaffected by this change; the only difference, as we would expect, is to the background colour of the upper div.

Taking the alpha component all the way to 0 for background-color would mean that it would be immaterial what values we put in for red, green, or blue; the background-color would, under this condition, always be fully transparent.

1. div#upper { left: 17em; top: 7em; background-color: rgba(255, 255, 0, 0.5);  }

Let’s set background-color back to the conditions we had at the start and introduce opacity. Set to a value of 1 under our initial conditions, there will be no difference. Set to 0.25, however, produces a significant change. As you can see to the left, the entire div, including the background colour, paragraph content, border and image, is now halfway transparent. This is, obviously, a very different effect.

1. div#upper { left: 19em; top: 9em; background-color: rgba(0, 0, 0, 1);
2. opacity: 0.25;  }