Motion and color - HTML5 and CSS3 - page 318

Miranda's Acronym Cheat Sheet

WE techies love our acronyms. Let me
explain the common ones in this chapter:
RGB , RGBA , HSL , and HSLA . The seven letters
mean the same thing in all four.

R = Red Hue = H

G = Green
B = Blue

Saturation = S
Luminosity = L

A = Alpha (Opacity) = A

RGBA

Sometimes you don't want to make an
entire element transparent or semi-
transparent. If you refer back to the
example from listing ch09/opacity-
4.html, the text and the background
are semitransparent.
If you want people be able to read large amounts of text like this, then
a semitransparent background would be better combined with fully
opaque text. Rather than make the entire element semitransparent,
CSS3 provides several ways of specifying color values that have a level
of transparency, the first of which is rgba() . You can use rgba() to make
just the background transparent. If you're used to the hexadecimal
shorthand for specifying colors, these two diagrams show how they're
related.

Blue component
0−255

red component
00−ff

Green component
00−ff

red component
0−255

background: #666666;
opacity: 0.5;

background: rgba(102, 102, 102, 0.5);

Blue component
00−ff

Green component
0−255

Alpha Transparency
0.0−0.1

Opacity
0.0−1.0

50% opacity element with a
dark gray background

Element with a background that is
both dark gray and 50% opacity