Color and Opacity 113
Figure 10-1: The effect of differing opacity values on three identical elements
Now, here’s an extremely important point to remember about this
property: Opacity affects not only the element it’s applied to but also all
of that element’s children. If I set an opacity value of 0.5 on an element, its
children will never be more opaque than that. This setting can’t be over-
ruled by any other property—or rather, you can never make an element
more opaque than its parent, but you can make it less opaque.
This may make the opacity property seem somewhat limiting, as you
can’t apply it to elements with children without also applying it to their
children. CSS3 has a new method to get around this limitation, however;
it’s called the Alpha channel, and I explain it in the next section.
New and Extended Color Values
CSS2.1 allowed three methods for specifying color values: keywords
(black), hexadecimal notation (#000000), and RGB ( 0 , 0 , 0 ). In CSS3, the
range is expanded by a completely new method of specifying colors (see
“Hue, Saturation, Lightness” on page 116), as well as the introduction of
opacity through the Alpha channel.
The Alpha Channel
The Alpha channel (Alpha for short) is the measure of the opacity of a
color—as opposed to the opacity property, which is the measure of the
opacity of an element. So, although color values using Alpha can be inher-
ited by child elements like any other color value, the overall opacity of the
element is not affected.
CSS3 introduces Alpha as a value in the RGBA color model. RGBA
stands for Red, Green, Blue, Alpha, and is applied with the rgba() function.
The syntax is the same as for the rgb() function value used in CSS2, but
with the Alpha value specified by an extra comma-separated argument at
the end:
E { color: rgba(red, green, blue, alpha); }
The value of the alpha argument is the same as the value provided for
opacity: a decimal fraction from 0.0 to 1.0, which is once again a measure
