In HTML, is there any way to make the background color of a box transparent, but not

S

SJ Mastro

New member
the text within? I'm trying to create a text box for my site, with a transparent white background and black text. I've figured out how to do transparency (opacity), making the white background 'see through', but it also makes the text transparent. Is there anyway to make only the background transparent, but not the text?

Here's the code I have so far:
.twoColFixLtHdr #mainContent {
margin: 0 0 0 250px;
background-color:#FFFFFF;
opacity:0.5;
filter: alpha(opacity=50);
-moz-opacity:0.5;
padding: 0 20px;

I'm kind of new to all of this, so any help is appreciated! Thanks!!
 
.twoColFixLtHdr #mainContent {

margin:0 0 0250px;
padding:0 20px;

}

you do not need the background element if you want a transparrent div.

by setting a background you are telling the browser you to not want to show the content behind the div and want to add a new background.

This will also not effect the text color.

Or you can do this by making a transparrent 1x1 image in photoshop and repeating it by adding:

background:url(/path/to/transparrent/image) repeat;

but this would increase page-load time and is not reccomended.

Hope this helps!

-Phil
 
All HTML elements except form elements are transparent by default. That means unless you set a background color, the default background color of an element will be that of the element behind it.

If you don't want complete transparency but a transparency effect, then you must use a GIF or PNG image as background with a transparency effect. Only GIF and PNG images support transparency (JPG doesn't). PNG is better than GIF because it supports 24-bit colors (just like JPG), while GIF has only 256 colors (very poor).
 
so you want to have a box with no background, or a semi transperent background thats white. if you dont want a background just dont put anything about the background in the code and the box will be fully transperent to the body's background. if you want a semi transperent background make a semitransperent very small white picture with photoshop or soemthing like that and then set that to repeat as the background. then the picture in the box's background will be transperent but the text wolnt because its the picture thats transperent not the entire box
 
Back
Top