HTML and CSS Reference
In-Depth Information
To avoid this problem, first define a fallback style for IE 6-8 using hexadecimal notation, a color keyword, or
an rgb() value. Then follow it with an rgba() or hsla() value like this:
background-color: #FFF;
background-color: rgba(255, 255, 255, 0.8);
Browsers ignore values they don't understand. So, an old browser should apply the first value ( #FFF or
solid white), and ignore the second one. But a modern browser that understands rgba() applies the rules of the
cascade, and uses the second value (translucent white) to override the first one.
This works as expected in IE 8 and any other mainstream browser. IE 8 uses the solid color, others use the
translucent one. However, IE 6 and IE 7 don't play ball. They ignore both colors, leaving the text without an
independent background.
Fortunately, the solution is simple: use background-color for the fallback color and the background
shorthand property for the color with alpha transparency. The styles for the <div> that contains the text in
background_alpha.html look like this:
#sailing {
background-color: #FFF;
background: rgba(255, 255, 255, 0.8);
width: 230px;
padding: 10px;
margin-left: 230px;
This keeps all browsers happy. As Figure 8-2 shows, IE 6 uses the hexadecimal value and displays a solid
white background behind the text. IE 7 and IE 8 do the same. All other mainstream browsers use the rgba() value
and render a translucent background as in Figure 8-1 .
The background-color property works only with solid and translucent colors. it can't be used to apply a
gradient. Css3 treats gradients as images. You'll learn about Css gradients in Chapter 19 .
Search WWH ::

Custom Search