Help with opacity on background image, but not <th> text contents.

[Darkmatter5]

Here's my css code:

 

#pc_toolbar_cell {
    -moz-opacity: 0.25;
    filter: alpha(opacity=25);
    opacity: .25;
    background-image: url(../images/nuclear.png);
    background-repeat: no-repeat;
    background-position: center;
}

<th width='25%' height='100' id='pc_toolbar_cell'>test</th>

 

This makes the background semi-transparent, but also makes the text semi-transparent.  How can I make the opacity stuff only affect the background image and NOT the content of the <th>??

[Hybride]

This tutorial may be of some help: Transparencies.

You could try something like:

#pc_toolbar_cell {
    -moz-opacity: 0.25;
    filter: alpha(opacity=25);
    opacity: .25;
    background-image: url(../images/nuclear.png);
    background-repeat: no-repeat;
    background-position: center;
}

#pc_toolbar_cell p{
color:#000
}

<th width='25%' height='100' id='pc_toolbar_cell'><p>test</p></th>

[haku]

The maximum opacity for anything is the opacity of it's parent. So if you set the opacity of a div to 50%, then the maximum opacity for anything inside that div will be 50%. So if you set the opacity on the text to 50%, the actual opacity of the text will be 25%: 50% of 50%.

 

So the only way to do this is through some creative CSS and possibly some Javascript - you will need to create the text in a div not inside the lowered opacity div, then position the text over the lowered opacity div using absolute, fixed, or relative positioning.

[TheFilmGod]

OR you can use a png with semi-transparency as the background??