Alpha Transparency

Hi,

I'm using the following code to creat a transparency for certain cells of a table:

<table background="img/home_bg.jpg" width="500" height="500">
      <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?
liltygaAsked:
Who is Participating?
 
seanpowellCommented:
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">&nbsp;</td>
  </tr>
</table>
0
 
lombardpCommented:
I never used alpha transparency filters, but I would try to override opacity style in the inner <DIV>:

<table background="img/home_bg.jpg" width="500" height="500">
     <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>

0
 
liltygaAuthor Commented:
Thanks lombardp,

Unfortunately I tried this already with no success :(
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
brunoCommented:
you are applying the transparency to the whole table cell...you just want the background color of the table cell to use the filter?
0
 
seanpowellCommented:
I just posted this a couple of days ago - it may be what you need:

http://www.pdgmedia.com/ee/trans.html
0
 
COBOLdinosaurCommented:
Just put a layer with a high z-index on top in the cell and adjust the relative position.

<table background="img/home_bg.jpg" width="500" height="500">
     <tr><td>
          <div style="height:250px;background-color:#ffffff;filter: alpha(opacity=50); -moz-opacity: 0.50;">&nbsp;</div>
<div style="height:250px;z-index:10;position:relative;top:-250px;left:0px;text-align:center">
alpha transparency applied</div></td>
     </tr>
     <tr> <td height="250"><div align="center">no alpha transparency applied </div></td></tr>
</table>


Cd&
0
 
seanpowellCommented:
Man you're getting close there Cd&...
7 digits - just about right for your average Dino :-)
0
 
liltygaAuthor Commented:
Thanks so much for all your help!!
0
 
COBOLdinosaurCommented:
Glad we could help. Thanks for the A. :^)

Sean,

You always use three so I'm trying to get the average up. ;^)

Cd&
0
 
seanpowellCommented:
Actually I was referring to your point total ;-)
0
 
COBOLdinosaurCommented:
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&
0
 
brunoCommented:
Cd& - Questions Answered 2700

nice job man.
0
 
COBOLdinosaurCommented:
I wonder if any of them is without a typo. ;^)

Cd&
0
 
Richard QuadlingSenior Software DeveloperCommented:
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 class="MaintSPANErrorLabel">Password</span></th>

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.
0
 
Richard QuadlingSenior Software DeveloperCommented:
I think the reason this works is that positioned elements lose the filter. I think. Not sure. Also, not tested on anything other than IE6. Sorry.
0
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.

All Courses

From novice to tech pro — start learning today.