opacity vs rgba

This transparency thing is very useful, esoecially to desginers. There are two methods for setting the transparency of an element with your stylesheet.

First use the opacity property. For example imagine you have a paragraph. The following would make the paragraph transparent. This would include the entire element, text and background.

p {

The other method is to assign an element an rgba color value. Any element that can be assigned a color value using a hex color like #FF0000, can also be assigned a color value with rgba. For example:


In this example the color of the text would red 50% transparent. The first three values, with ranges of 0 to 255, represent the amount of red, green and blue. The last value, with a range of 0 to 1, represents the amount of transparency.

Using rgba you can transparency any feature of an element.

The difference between the two is, using opacity will take the element with it’s current rendering and display it transparent at the opacity value. rgba on the other hand selts the color value of any feature of an element to include a transparency level.

Leave a Reply

Your email address will not be published. Required fields are marked *