keeping myText clear

[joonstar]

<style>

.bgImage {
background-image: url(google.gif);
}

.noBgColor{
width:500px;
height:200px;
font-size:50px;
}

.bgColor {
filter: alpha(opacity=40);
width:500px;
height:200px;
font-size:50px;
background-color:#777777;
}

</style>

<table>
<tr>
<td class='bgImage'>

<table>

<tr>
<td class='noBgColor'> myText1</td>
</tr>
<tr>
<td class='bgColor'>
myText2
</td>
</tr>

</table>

</td>
</tr>
</table>The result of the code above is at http://dot.kr/test/26.htm.


The second row which has myText2 has background color while the first row which has myText1 has no background image.

In order to make the background image be seen, the background color in the second row has filter.


So the background color in the second row is now transparent.

My problem is that myText2 seem also transparent.

I like to make myText2 is not transparent although the background color of the second row is transparent.


I like to make myText2 is clearly seen.

Can I do it with your help?

[yeti]

I was looking at the example and both texts are black, myText1 has the bg image and myText2 has a grey background. The filter-rule is only for IE, for Firefox you have to use the following:

.bgColor {opacity:0.4;}

It is also clear, that the opacity applies to the whole element, the text included.

Solution: Try wrapping a <span> element around the myText2 and apply the opacity rule with 1.0 resp. set the filter to 100.

.bgColor span {
filter: alpha(opacity=100);
opacity:1.0;
}


I did not tested it, but it should work that way.

Btw: I think, the opacity-rule is not css2 specification.