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
.
Note
