16.2.5 Color, Transparency, and Translucency
You can specify the color of text contained in a document element with the CSS color property. And you can specify the background color of any element with the background-color property. Earlier, we saw that you can specify the color of an element’s border with border-color or with the shortcut property border.
The discussion of borders included examples that specified border colors using the English names of common colors such as “red” and “black”. CSS supports a number of these English color names, but the more general syntax for specifying colors in CSS is to use hexadecimal digits to specify the red, green, and blue components of a color. You can use either one or two digits per component. For example:
#000000 /* black */ #fff /* white */ #f00 /* bright red */ #404080 /* dark unsaturated blue */ #ccc /* light gray */
CSS3 also defines syntaxes for specifying colors in the RGBA color space (red, green, and blue values plus an alpha value that specifies the transparency of the color). RGBA is supported by all modern browsers except IE, and support is expected in IE9. CSS3 also defines support for HSL (hue-saturation-value) and HSLA color specifications. Again, these are supported by Firefox, Safari, and Chrome, but not IE.
CSS allows you to specify the exact position, size, background color, and border color of elements; this gives you a rudimentary graphics capability for drawing rectangles and (when the height and width are reduced) horizontal and vertical lines. The last edition of this book included a bar chart example using CSS graphics, but it has been replaced in this book by extended coverage of theelement. (See Chapter 21 for more on scripted client-side graphics.)
In addition to the background-color property, you can also specify images to be used as the background of an element. The background-image property specifies the image to use, and the background-attachment, background-position, and background-repeat properties specify further details about how this image is drawn. The shortcut property background allows you to specify these properties together. You can use these background image properties to create interesting visual effects, but those are beyond the scope of this book.
It is important to understand that if you do not specify a background color or image for an element, that element’s background is usually transparent. For example, if you absolutely position a
The transparency we’ve been discussing so far is all-or-none: an element either has a transparent background or an opaque background. It is also possible to specify that an element (both its background and its foreground content) is translucent. (See Fig ure 16-3 for an example.) You do this with the CSS3 opacity property. The value of this property is a number between 0 and 1, where 1 means 100 percent opaque (the
16.2 Important CSS Properties | 427
default) and 0 means 0% opaque (or 100% transparent). The opacity property is supported by all current browsers except IE. IE provides a work-alike alternative through its IE-specific filter property. To make an element 75 percent opaque, you can use the following CSS styles:
opacity: .75; /* standard CSS3 style for transparency */ filter: alpha(opacity=75); /* transparency for IE; note no decimal point */