We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

Alpha Transparency

liltyga
liltyga asked
on
Medium Priority
6,579 Views
Last Modified: 2007-12-19
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?
Comment
Watch Question

Commented:
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>

Author

Commented:
Thanks lombardp,

Unfortunately I tried this already with no success :(

Commented:
you are applying the transparency to the whole table cell...you just want the background color of the table cell to use the filter?
Top Expert 2004

Commented:
I just posted this a couple of days ago - it may be what you need:

http://www.pdgmedia.com/ee/trans.html
Top Expert 2013
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
Top Expert 2004
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview
Top Expert 2004

Commented:
Man you're getting close there Cd&...
7 digits - just about right for your average Dino :-)

Author

Commented:
Thanks so much for all your help!!
Top Expert 2013

Commented:
Glad we could help. Thanks for the A. :^)

Sean,

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

Cd&
Top Expert 2004

Commented:
Actually I was referring to your point total ;-)
Top Expert 2013

Commented:
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&

Commented:
Cd& - Questions Answered 2700

nice job man.
Top Expert 2013

Commented:
I wonder if any of them is without a typo. ;^)

Cd&
Richard QuadlingSenior Software Developer

Commented:
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.
Richard QuadlingSenior Software Developer

Commented:
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.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.