HTML and CSS Reference
In-Depth Information
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
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.
Standard
Prefixed
1.0
-
1.0
0.8
9.0
-*
9.0
-
1.2
1.0
*
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.
