Transparent div how to

HTML & CSS
1

Hi All,

I want to have a transparent div that does not affect the content. I have applied transparency to the header section, which contains a navigation div and a logo div, but do not want the transparency to apply to those two other divs.
Is there a way to fix this.

I used the following code:

{
	zoom: 1;
	filter: alpha(opacity=50);
	opacity: 0.5;
}
2

Opacity values will always cascade down to child elements - you can’t have opacity:0.5 on a parent div, then set opacity:1 to a child div.

Will using a 50% transparent PNG or rgba value on the header div do the same job?

3

Yes, that’s a good option that works across older browsers too. But what I’d do these days is use RGBA:

div {
  background: rgba(256,256,256,0.5);
}

That’s a white background set to 50% opacity. You can, of course, change that to any other RGB color.

4