لطفا منتظر باشید ...
Making a Background Color Transparent
One 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
As you can see, this allows the background behind the element to show through (see Figure 8-13).
<!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>
Figure 8-13. The transparent value allows the background to show through the elementin this case, the table cell with the highlight class shows.
