HTML and CSS Reference
In-Depth Information
Figure 8-1.
The body uses a solid background color, but the text background is translucent
body {
margin: 0;
padding: 0;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #000;
background-color: #D2E1E6; /* light blue */
}
Setting a Background Color with Alpha Transparency
Modern browsers support alpha transparency, which creates a translucent effect that can produce a more
pleasing result than a solid block of color in some circumstances. For example in Figure
8-1
, the sea is partially
visible through the white background behind the text. This is achieved by setting the alpha transparency of the
white background to
0.8
.
To set a background color with alpha transparency, you need to use an
rgba()
or
hsla()
value, which IE 8
and earlier don't support. So, if you use one of these values on its own, older versions of Internet Explorer ignore
the background color and display the text on top of the background image, making it very difficult to read.
