| View previous topic :: View next topic |
| Author |
Message |
Stormx
Member
Joined: 19 May 2003
Posts: 19
|
 Posted: Wed Aug 13, 2003 11:00 am Post subject: Semi Transparent Tables With Opaque Content |
 |
|
My Page (or one of them) is located here:
http://www.goldenfalcon.net/some%20design/index.php?id=News
You notice that the tables are semi transparent (25% opaque). I added this attribute to my <td> tag to make them like that:
style="filter:alpha(opacity=25)"
The problem comes when I want the text to be solid. The whole idea of the cells being transparent is to give a "misty" effect on the background.
How do I make the text solid but the cells semi tranparent.
I tried puting the attribute in divs around the text with the ocupasity of 100% |
|
| Back to top |
|
 |
sohnee
Senior Member
Joined: 17 Jul 2002
Posts: 2077
Location: UK
|
| Posted: Fri Aug 15, 2003 12:31 am Post subject: |
|
|
The only way I can get this to work as you want is by placing the table with the background on the page with no content.
Then I add a <div> with an identical table over the top.
i.e.
| Code: | <div id="seethru" style="z-index: 1;position:absolute; top:10; left:10;">
<table width="100%" cellpadding="2" cellspacing="5" border="0">
<tr>
<td colspan="2" background="table1bg.gif" style="filter:alpha(opacity=25)"></td>
</tr>
<tr>
<td background="table1bg.gif" style="filter:alpha(opacity=25)" width="200"></td>
<td background="table1bg.gif" style="filter:alpha(opacity=25)"> </td>
</tr>
</table>
</div>
<div id="content" style="z-index: 2;position:absolute; top:10; left:10;">
<table width="100%" cellpadding="2" cellspacing="5" border="0">
<tr>
<td colspan="2">CONTENT</td>
</tr>
<tr>
<td width="200">CONTENT</td>
<td>CONTENT</td>
</tr>
</table>
</div> |
You will need to think about adding height/width instructions to all cells if you want specific spacing. |
|
| Back to top |
|
|
|
TY JavaScript 3rd Ed.
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
