Using CSS, how do I make text transparent?

Use the "opacity" property. Set it to a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example

p.partiallyTransparent {
opacity 0.5;
}

This would set all p elements with the "partiallyTransparent" class to 50% transparency.

Note that this will not work in IE 6 or Konqueror.
 
Here's a better, cross-browser solution

alphatrans {
filteralpha(opacity=50);
-moz-opacity0.5;
-khtml-opacity 0.5;
opacity 0.5;
}

The alpha filter is the IE solution. Opacity covers all the others, with a couple of quirky ones for legacy netscape and safari browsers.

To use this for a paragraph of text, use the alphatrans (or whatever name you give to define your class) class as follows

<p class="alphatrans">Place all your text here and it should be medium gray (50% of black) in color. To use a different color than black, add 'color#XXXXXX;' to your class statement.</p>

It's a little more complex if you want to layer your text over other elements on the page. For that you would need to specify positioning (on the page) and z-index (stacking order). Let me know if you need to know how to do that.

Best of luck.

k
 
You must log in or register to reply here.
Back
Top