HTML and CSS Reference
Colors and opacity
In the beginning, the web was black and white, but these days there
aren't many websites that don't make extensive use of color. It's
unlikely the web will revert to black and white any time soon, so it's a
good thing CSS3 includes several new features for colors. Later in this
section, you'll learn about RGBA , HSL , and HSLA . First, though, let's
investigate how CSS3 allows you to achieve another popular effect in
modern web design: semitransparency with the opacity property.
Opacity is a measure of what percentage of light is blocked by an object.
In the case of HTML and CSS , the objects are elements on the page.
They are, by default, fully opaque; no light is allowed through, so you
can see nothing of the elements beneath (that is, earlier in the source
code). If a paragraph has a blue background, it completely obscures
any background on the element that contains the paragraph.
IE has been able to do transformations
with the nonstandard filter attribute
since version 5.5.
Opacity can be used to de-emphasize page elements to let your user
focus on a single important task. This is commonly seen on the web in
the ubiquitous lightbox, shown in action here.