Solved

Alpha Transparency

Posted on 2004-04-06
15
6,524 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?
0
Comment
Question by:liltyga
  • 4
  • 4
  • 2
  • +3
15 Comments
 
LVL 9

Expert Comment

by:lombardp
ID: 10767076
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
 

Author Comment

by:liltyga
ID: 10767139
Thanks lombardp,

Unfortunately I tried this already with no success :(
0
 
LVL 18

Expert Comment

by:bruno
ID: 10767190
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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 31

Expert Comment

by:seanpowell
ID: 10767256
I just posted this a couple of days ago - it may be what you need:

http://www.pdgmedia.com/ee/trans.html
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 200 total points
ID: 10767740
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
 
LVL 31

Accepted Solution

by:
seanpowell earned 300 total points
ID: 10767781
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 10767865
Man you're getting close there Cd&...
7 digits - just about right for your average Dino :-)
0
 

Author Comment

by:liltyga
ID: 10768021
Thanks so much for all your help!!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10768156
Glad we could help. Thanks for the A. :^)

Sean,

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

Cd&
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10768194
Actually I was referring to your point total ;-)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10769199
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
 
LVL 18

Expert Comment

by:bruno
ID: 10770369
Cd& - Questions Answered 2700

nice job man.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10770494
I wonder if any of them is without a typo. ;^)

Cd&
0
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 12043213
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
 
LVL 40

Expert Comment

by:Richard Quadling
ID: 12043226
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

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question