Opacity Problem

I have a div with a opacity applied to make the bg color lighter.

#body_text {
	    width:300px;
		background-color:#FFFFFF;
		padding:10px;
		margin:10px;
		line-height:20px;
		filter:alpha(opacity=50);
		-moz-opacity:.50;
		opacity:.50;
		float:left;
		}

HTML:

The problem is that wen i put some text within this div it makes the text fade also.

How do i fix this?

 

I've never worked with Opacity before but I assume you could maybe put the text within a Span and set the opacity to 100, e.g

<div id="body_text"><span class="full">Text Text Text</span></div>

and then the CSS would be:

.full {
filter:alpha(opacity=100);
-moz-opacity:.100;
opacity:.100; }

It might work i'm not sure, there's probably an easier way around this.

 

That was my logic also, but that does not work.

 

I did a quick Google search on your behalf and it seems Stomme has already answered your question not too long ago

http://forums.digitalpoint.com/showthread.php?t=761408

 

Thank you very much for this, i cannot however get this to work.

I have tried the below with no luck:

	<div id="body_text">
		<div id="body_text_con">
	
	  <p>This is the text</p>
	  	<div id="body_text_con">
	</div>

HTML:

CSS

	#body_text {
	    width:300px;
		background-color:#FFFFFF;
		padding:10px;
		margin:10px;
		line-height:20px;
		filter:alpha(opacity=50);
		-moz-opacity:.50;
		opacity:.50;
		float:left;
		}
		
	#body_text_con {
		filter:alpha(opacity=100);
		-moz-opacity:.100;
		opacity:.100;
	
	}

HTML:

Cheers.

 

Are you just setting a background colour or is it a background image?

If it is a background colour you could just create the colour in photoshop or whatever, and save it at 50% opacity .png, and then have it repeat, probably easiest option.

However otherwise it looks like you have to position it as though it were inside the container but it is actually outside. So you just set the position top left right etc to exact px or em ...

 

It doesn't work because you have a stoopid typo : )

   
#body_text_con {
        filter:alpha(opacity=100);<-- this line is correct
        -moz-opacity:.100;<-- this line has a . in front of 1 so it's not 100% but 10%!
        opacity:.100;<-- same typo here
    
    }

Code (markup):

But if I recall correctly, opacity is NOT inherited so you should NOT need to "reset" the child back to 100% opacity. It should be that by default. So, just delete that whole part of your CSS : )

 

Thank you for that, but it still does not resolve the problem and the text is still faded.

 

I have resolved this with a PNG fix as this was doing my nut in.

Cheers for your help though.

 

Oh geez... I decided to play with opacity on another site, and it turns out I was wrong. Children DO inherit their parents' opacity-- whatever the parent is set to, the child thinks is the same as 100% opacity. So you can't get anything more opaque than the parent-- I didn't see this on my page because I didn't go below .7 opacity, so the text looked okay while still showing the effect.

What one needs to do is yes, have 2 containers, but the text container cannot be a child of the transparent container. Instead you have to position the text container over the transparent one somehow (either absolute, relative positioning or just pull it over with negative margins).

So, sorry I gave bad advice, and the page I was working on (where I got it to work) is here.

 

Hehe i thought this was the case that you needed to position the second container as if it were inside the first, and was puzzled by the link of the site you gave as this didn't but it must have been because it was only set to 0.9 if i remember.

 

Yeah, while building it, I had to keep in line with the print design so the lowest I'd ever gone was .7... but I should play with z-index because, on the last site I linked, if the second div is relatively positioned over the first it seems to be able to affect it... then added a z-index of just 1 and turned to 100%... interesting.

 

to fix links just use an advanced selector

#parent>a {
/*insert your opacity styles so the links don't fade*/
}

I realize I might be a bit late to the party on this one but figured this could be helpful anyways.

Cheers.

 

^ but if parent is .5 opacity (half see-through) then as far as I can tell, you can't bring anything that's a child "back up" to 100% opacity... because the children think that what their parent is (the parent is .5 or 50% rememeber) IS 100%. That's why no matter what you do, children always fade with their parents. I didn't see that at first.

 

Just wondering if this would work or not, but how about setting the opacity on the child to 200%? I mean you do it the way you would do a fluid theme, where the width is inherited, you would be taking 100% of the previous one. So you are taking 100% which is only 50% opacity. So if you were to set that to 200%, would it not fix it?

Regards,
Nick

 

Nope, tried it. I think if the child believes the parent's opacity really equals 100% then it can't go any higher than 100%... just like with 100% height and then trying to add padding.