Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.
Alpha Transparency
Hi,
I'm using the following code to creat a transparency for certain cells of a table:
<table background="img/home_bg.jp
<tr>
<td height="250" bgcolor="#ffffff" style="filter: alpha(opacity=50); -moz-opacity: 0.50;"><div align="center">alpha transparency applied</div></td>
</tr>
<tr> <td height="250"><div align="center">no alpha transparency applied </div></td></tr>
</table>
The problem is that the text is also afflicted with the transparency. How can I make the background use the transparency, but not the text?
I'm using the following code to creat a transparency for certain cells of a table:
<table background="img/home_bg.jp
<tr>
<td height="250" bgcolor="#ffffff" style="filter: alpha(opacity=50); -moz-opacity: 0.50;"><div align="center">alpha transparency applied</div></td>
</tr>
<tr> <td height="250"><div align="center">no alpha transparency applied </div></td></tr>
</table>
The problem is that the text is also afflicted with the transparency. How can I make the background use the transparency, but not the text?
Asked:
4
4
2- +3
2 Solutions
you are applying the transparency to the whole table cell...you just want the background color of the table cell to use the filter?
I just posted this a couple of days ago - it may be what you need:
http://www.pdgmedia.com/ee/trans.html
http://www.pdgmedia.com/ee/trans.html
Just put a layer with a high z-index on top in the cell and adjust the relative position.
<table background="img/home_bg.jp
<tr><td>
<div style="height:250px;backgr
<div style="height:250px;z-inde
alpha transparency applied</div></td>
</tr>
<tr> <td height="250"><div align="center">no alpha transparency applied </div></td></tr>
</table>
Cd&
<table background="img/home_bg.jp
<tr><td>
<div style="height:250px;backgr
<div style="height:250px;z-inde
alpha transparency applied</div></td>
</tr>
<tr> <td height="250"><div align="center">no alpha transparency applied </div></td></tr>
</table>
Cd&
That's pretty much what I was suggesting :-)
<style type="text/css">
table { background-image: url('color1.gif'); }
#trans { position:relative; left:0; top:0; z-index:1; width:100%; height:100%; background-color:#FFF; filter:alpha(opacity='40')
</style>
<table>
<tr>
<td width="100" height="100">
<div style="position:relative; width:100%; height:100%;">
<div id="trans"></div>
<div style="position:absolute; left:0; top:0; z-index:2;">
<p>MY TEXT</p>
<p><a href="#">My Link</a></p>
</div>
</div>
</td>
<td width="100" height="100"> </td>
</tr>
</table>
<style type="text/css">
table { background-image: url('color1.gif'); }
#trans { position:relative; left:0; top:0; z-index:1; width:100%; height:100%; background-color:#FFF; filter:alpha(opacity='40')
</style>
<table>
<tr>
<td width="100" height="100">
<div style="position:relative; width:100%; height:100%;">
<div id="trans"></div>
<div style="position:absolute; left:0; top:0; z-index:2;">
<p>MY TEXT</p>
<p><a href="#">My Link</a></p>
</div>
</div>
</td>
<td width="100" height="100"> </td>
</tr>
</table>
Glad we could help. Thanks for the A. :^)
Sean,
You always use three so I'm trying to get the average up. ;^)
Cd&
Sean,
You always use three so I'm trying to get the average up. ;^)
Cd&
Oh yeah that... The result of many misspent hours... days... weeks. It's gotten too easy.
I thought I left on of my trademark typos in a color value.
A million is nice but getting cert number 6 (web languages) is bigger. There are fewer experts with 6 then there are million pointers.
Cd&
I thought I left on of my trademark typos in a color value.
A million is nice but getting cert number 6 (web languages) is bigger. There are fewer experts with 6 then there are million pointers.
Cd&
There is a slightly easier way ...
I have a cell (which is a TH) ...
<style>
.MaintTHError
{
border-style : none;
border-color : #FF0000;
background-color : #FF0000;
filter : alpha(opacity='15');
}
.MaintSPANErrorLabel
{
position: relative;
left: 0px;
top: 0px;
text-align: center;
}
</style>
<th class="MaintTHError"><span
That's it!
I use this to give the cell (which is a header for a row) a transaparent red background when there is an error in that row. The page background stills shows through and you do not need to worry about sizing anything. I've only tried it with a single line of text.
Hope this is of use to you all!
Regards,
Richard Quadling.
I have a cell (which is a TH) ...
<style>
.MaintTHError
{
border-style : none;
border-color : #FF0000;
background-color : #FF0000;
filter : alpha(opacity='15');
}
.MaintSPANErrorLabel
{
position: relative;
left: 0px;
top: 0px;
text-align: center;
}
</style>
<th class="MaintTHError"><span
That's it!
I use this to give the cell (which is a header for a row) a transaparent red background when there is an error in that row. The page background stills shows through and you do not need to worry about sizing anything. I've only tried it with a single line of text.
Hope this is of use to you all!
Regards,
Richard Quadling.
Question has a verified solution.
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
Join & Write a Comment Already a member? Login.
Featured Post
The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.
One of a set of tools we're offering as a way of saying thank you for being a part of the community.
Tackle projects and never again get stuck behind a technical roadblock.
Join Now
<table background="img/home_bg.jp
<tr>
<td height="250" bgcolor="#ffffff" style="filter: alpha(opacity=50); -moz-opacity: 0.50;">
<div align="center" style="filter: alpha(opacity=100); -moz-opacity: 1.00;">alpha transparency applied</div>
</td>
</tr>
<tr> <td height="250"><div align="center">no alpha transparency applied </div></td></tr>
</table>