CSS Opacity & Text help

[mikel2k3]

Right, this may of been asked before, but ive been looking around and cant really find exactly what I need.

So does anybody know of a way that I can make a background colour of a div box opaque, while keeping the text inside of it fully visible?

At the moment, all my text and images inside of the div become opaque too, which is just a bit useless really.

All help muchly apreciated

[Jake]

Have you tried setting the opacity of a paragraph tag, or a span tag or even another div tag inside of the one with opacity on it? Never had to do anything like this but that seems like a place to start.

[mender42]

Try fudging the css with something like:

background-color: somecolor....;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;

leaving font colors and weights to what you have normally.....

Say for a menu something like:

menu, .ssmenu {
background-color:#ddffdd;
color:black;
font-size:12px;
font-weight:bold;
border:1px solid #EFB;
padding:1px;
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity: 0.75;
width:15em;
margin:1em;
}

Uh play with it?

[bonbon]

Hmm..suggestion.. It is better to choose colors to text who are strong to viewer's eyes and a not bigger siize in font matching with a light background

[mikel2k3]

Hmm im still struggling with this a little...
I get the feeling im going to have to scrap the design, but ahh well... Guess its what im limited to really.

Any images or text that go into the box are also opaque, which really sucks.

Ill try and get the layout done without the transparency.
Thanks anyway guys

[konekt]

Hmm im still struggling with this a little...
I get the feeling im going to have to scrap the design, but ahh well... Guess its what im limited to really.

Any images or text that go into the box are also opaque, which really sucks.

Ill try and get the layout done without the transparency.
Thanks anyway guys

This might be a little crude, but, it is a solution. Place your transparent element on the page. Then, set your text on a seperate <div> element (NOT within the transparent element) and set its position to be on top of the transparent element.

[Jake]

That would work, just make sure to use relative positioning, NOT absolute!