remove alpha from content

[fortnox007]

Hi all, i have a small question, maybe someone can help me out.

I have a div which i give an alpha of .5 so it becomes opaque. problem is not only the background becomes transparent but also the content of the div. I tried the following but that didn't work. anyone might know a way to work around this?

 

div.opaque{
    opacity: .5; /*all decent no  crappy browsers */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* first! IE8 */
    filter: alpha(opacity=50);                                    /* second! IE5-7*/   
}
p.opaque{/* I tried to reset opacity */
   opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100); 
}

 

 

Would love to here some tips

I could try to add a div inside, but i rather not since it will be hard to maintain that way.

[lostprophetpunk]

The reason why it is not setting to full opacity is due to the fact the the containing div (div.opaque) is set to a lowered alpha opacity. This makes the opacity of the content within that div the same as the divs opacity setting, no matter what you set the opacity to.

 

A simple fix could be to make a 1px image at the opacity you wish to use, and apply it as the background.

[fortnox007]

You are indeed a prophet that is a very clean way.

I allready tried stuff with a parent div and a color div with absolote positioning inside it and a content div ontop. It worked but was extremely redundant.

 

Thanks alot!

 

-edit: that will be a bit tricky with (lte) ie6 though,  but that will teach those lazy fackers

[haku]

The reason why it is not setting to full opacity is due to the fact the the containing div (div.opaque) is set to a lowered alpha opacity. This makes the opacity of the content within that div the same as the divs opacity setting, no matter what you set the opacity to.

 

That's not exactly correct, though it's close. The opacity of the content can in fact be changed, but it's max opacity will be that of the parent div. So if the parent is given an opacity of 50%, and then the content is given an opacity of 50%, the content will have a total of 25% opacity (50% of 50%). If the content is given an opacity of 100%, it will have a total of 50% opacity (100% of 50%).

[fortnox007]

Thanks Haku, that sounds logical. And thanks you both for the help!