Web Design with Transparency in CSS 3

By Janine Warner, David LaFontaine, and Lee Andron from iPhone and iPad Web Design For Dummies

In addition to the keyword transparent, CSS 3 has another way to produce transparent or translucent elements on your web pages, as shown in the following chunk of code.

CSS 3 introduces the new color selector RGBa. RGBa is the same as the original RGB color selector, except that it takes a value that describes the alpha, or transparency, of the styled element.

<div style="background: rgba(0, 0, 255, 0.2);"></div>
<div style="background: rgba(0, 0, 255, 0.4);"></div>
<div style="background: rgba(0, 0, 255, 0.6);"></div>
<div style="background: rgba(0, 0, 255, 0.8);"></div>
<div style="background: rgba(0, 0, 255, 1)  ;"></div>

These elements are all blue, but they have a different amount of transparency, as illustrated. Note how the solid red block shows through.

In this example site about jellyfish, gradients with transparency were used to let the background show through. You can see that it was used to create a layered effect. If the bottommost color of the page is changed, all the layered colors let the change filter through a tint.