Jump to content

remove alpha from content


fortnox007

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 ::)

Link to comment
Share on other sites

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%).

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.