help with opacity

[cybershot]

I am using css to set the opacity of a div for the first time. The div has a background color of black. The opacity is working fine and is doing exactly what I want it to do. My problem is that I didn’t realize that it would also make the contents of the div have the same opacity. I tried to put the contents in a new div and set the opacity lower, but it don’t seem to work. I am trying to put white text in the box but the text is coming out brown because of the opacity setting on the parent div. Anyone know how to get around this issue?

[furrball1383]

basically you make two divs with the same dimensions, then place the text in one of them and the effect in the other, after this use z-index so that the effect div is pushed below the text div and hey presto!

[cybershot]

I couldn’t get it working.

#navigation {

width: 180px;

min-height: 104px;

background: #000;

opacity:.55;

filter:alpha(opacity=55);

filter: "alpha(opacity=55)";

padding: 20px;

z-index: 50;



}



#nav {

color: #fff;

width: 180px;

min-height: 104px;

z-index: 100;

}











Home


About


Work


Contact

[chrisburton]

Use rgba for the background color

[cybershot]

thanks for the link. I will check it out.

[furrball1383]

and once again I learned something new!

[Author]

Posts