Motion and color - HTML5 and CSS3 - page 319

Full Partial

2.0 -

3.0 -

9.0 -

The primary benefit is that the opacity
is now confined to the background—
the rest of the element's contents and
attributes can be full opacity.

10.0 -

3.1 -

The difference is even more pro-
nounced for the nested element exam-
ple, where previously setting the outer
element to transparent made the entire
set of elements disappear.
See the full code for this example in
listing ch09/rgba-2.html.

With transparency confined to the
background and not inherited, the text
and borders remain visible on all the
elements:

div > div > div > div > div > div {
background-color:
rgba(102,102,102, 1); }
div > div > div > div > div {
background-color:
rgba(102,102,102, 0.8); }
div > div > div > div {
background-color:
rgba(102,102,102, 0.6); }
div > div > div {
background-color:
rgba(102,102,102, 0.4); }