#2: RGBA vs Opacity

At first glance, rgba and opacity seem to do the same thing. Both deal with changing the degree of transparency on the page. You can specify the values from 1 (opaque) to 0 (completely transparent).

However, they are not the same. Rgba deals strictly with colors, while opacity can be applied to anything, even whole divs!  Rgba stands for red, green, blue, alpha. Alpha denotes the transparency of the color. Any color that you specify through rgb can change in strength using the alpha property. 

Still confused? css3.info’s “A brief introduction to Opacity and RGBA” has a great example of the difference between the two declarations. When you apply opacity to a background color of a div, it makes everything within the div inherit that opacity as well. But when you use rgba to set the opacity of the background color, only the background color changes in opacity, not the contents within the div.

Because this is a CSS3 technique, unfortunately all browsers do not support it yet (*cough* Internet Explorer *cough*). Drew McLellan from 24 Ways shows us a work around for this problem. Just like we do for font-faces, we can set up back-up background color values in case CSS3 is not available. Whatever element you applied the rgba to, you can also specify within the CSS a solid color replacement. And for a last desperate attempt, if you set the opacity to the background color, you can use a PNG image with slight opacity to achieve the same effect. That way, the effect you are trying to achieve can be seen across all browsers.

 In conclusion, rgba is a better way to set opacity to colors and won’t interfere with the other elements on the page. With rgba, you can set opacity for a drop down menu, but still have the text appear clear and crisp. 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s