Making a Background Color TransparentOne thing I didn't introduce while discussing background colors is the value of TRansparent for the background-color property. There's a method to my madness, of course: I wanted to introduce background images so you could get the full value of this very important CSS option. Example 8-6 describes the table used earlier, this time with a background image set for the body. You'll also notice that I've changed the .highlight class to have a background-color property value set to transparent. Example 8-6. Setting up a transparent background color<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>working with style</title> <style type="text/css"> body {background-image: url(gray.jpg); color: white;} caption {color: black; border: 1px solid black;} table {border: 1px solid black; padding: 5px; width: 90%;} th {background-color: #333;} tr {background-color: #999;} td {background-color: #ccc; border: 1px solid black;} .highlight {background-color: transparent; color: orange;} </style> </head> <body> <table cellspacing="5"> <caption>Comparing weather and time zones</caption> <tr> <th>Location</th> <th>Tucson, Arizona</th> <th>Las Vegas, Nevada</th> </tr> <tr> <th>Weather</th> <td>Warm to Hot</td> <td>Warm to Hot</td> </tr> <tr> <th>Time Zone</th> <td>No Daylight Savings</td> <td class="highlight">Mountain Standard Time</td> </tr> </table> </body> </html> As you can see, this allows the background behind the element to show through (see Figure 8-13). Figure 8-13. The transparent value allows the background to show through the elementin this case, the table cell with the highlight class shows. |